使用vue项目中，使用webpack模板和直接用vue.config来配置相关插件 区别是什么，具体有哪些提现呢

在 Vue 项目中，使用 Webpack 模板 和 vue.config.js 来配置相关插件的主要区别在于配置的复杂度、灵活性和易用性。以下是两者的详细对比：

1. Webpack 模板

Webpack 模板是 Vue CLI 早期版本（如 Vue CLI 2.x）中提供的项目初始化模板。它直接暴露了完整的 Webpack 配置文件，允许开发者完全自定义 Webpack 配置。

特点：

  • 完全控制：可以直接修改 webpack.config.js 文件，对 Webpack 的配置有完全的控制权。

  • 复杂度高：需要开发者对 Webpack 有较深的理解，配置较为繁琐。

  • 灵活性高：适合需要深度定制 Webpack 的项目。

示例：

在 Vue CLI 2.x 中，项目初始化后会生成以下文件：

复制

build/
  webpack.base.conf.js
  webpack.dev.conf.js
  webpack.prod.conf.js
config/
  index.js

开发者可以直接修改这些文件来配置 Webpack。

优点：

  • 适合需要高度定制 Webpack 的项目。

  • 可以直接使用 Webpack 的所有功能和插件。

缺点：

  • 配置复杂，学习成本高。

  • 需要手动维护 Webpack 配置，升级 Vue CLI 或 Webpack 时可能需要调整配置。

2. vue.config.js

vue.config.js 是 Vue CLI 3.x 及以上版本中提供的配置文件。它是对 Webpack 配置的抽象和封装，提供了更简单的方式来配置项目。

特点：

  • 简化配置：通过 vue.config.js 提供的高级选项来配置 Webpack，无需直接操作 Webpack 配置文件。

  • 开箱即用：Vue CLI 内置了常用的 Webpack 配置（如 Babel、ESLint、CSS 预处理等），开发者只需关注自定义部分。

  • 易于维护：配置更简洁，升级 Vue CLI 或 Webpack 时兼容性更好。

示例：

在 Vue CLI 3.x 及以上版本中，项目根目录下可以创建 vue.config.js 文件：

javascript

复制

module.exports = {
  // 基本路径
  publicPath: '/',
  // 输出目录
  outputDir: 'dist',
  // 是否启用 ESLint
  lintOnSave: true,
  // 配置 Webpack
  configureWebpack: {
    plugins: [
      // 自定义插件
    ],
  },
  // 链式操作 Webpack 配置
  chainWebpack: (config) => {
    // 修改 Loader 配置
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => {
        // 修改选项
        return options;
      });
  },
};
优点：

  • 配置简单，适合大多数项目。

  • 内置优化，开箱即用。

  • 易于升级和维护。

缺点：

  • 对于需要深度定制的项目，可能无法完全满足需求（虽然可以通过 configureWebpack 和 chainWebpack 扩展）。

3. 主要区别

特性Webpack 模板vue.config.js
配置方式直接操作 webpack.config.js通过 vue.config.js 抽象配置
复杂度高，需要熟悉 Webpack低，提供高级选项，简化配置
灵活性高，完全控制 Webpack中，通过 configureWebpack 和 chainWebpack 扩展
适用场景需要深度定制的项目大多数常规项目
维护成本高，升级时需要手动调整配置低，Vue CLI 自动处理大部分配置
学习曲线需要深入理解 Webpack只需了解 Vue CLI 提供的配置选项

4. 如何选择？

  • 使用 vue.config.js：

    • 适用于大多数项目，尤其是中小型项目。

    • 希望快速启动项目，减少配置工作量。

    • 不需要深度定制 Webpack。

  • 使用 Webpack 模板：

    • 需要完全控制 Webpack 配置。

    • 项目有特殊的构建需求，vue.config.js 无法满足。

    • 对 Webpack 非常熟悉，愿意手动维护配置。

总结

  • vue.config.js 是 Vue CLI 推荐的配置方式，适合大多数项目，简化了 Webpack 配置。

  • Webpack 模板 提供了更高的灵活性，适合需要深度定制的项目，但配置复杂，维护成本高。

提要：一些vue.config无法满足的场景

当项目有特殊的构建需求时，vue.config.js 可能无法完全满足，这时需要直接操作 Webpack 配置或使用 Webpack 模板。以下是一些常见的特殊构建需求示例：

1. 自定义 Loader

如果项目需要使用一些非常规的 Loader，而这些 Loader 无法通过 vue.config.js 的 chainWebpack 或 configureWebpack 轻松配置，可能需要直接操作 Webpack 配置。

示例：

  • 使用自定义的 Markdown 文件 Loader，将 Markdown 文件转换为 Vue 组件。

  • 使用自定义的图片压缩 Loader，对图片进行特殊处理。

解决方案：

在 Webpack 模板中，可以直接在 webpack.config.js 中添加自定义 Loader：

javascript

复制

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader',
          },
          {
            loader: 'my-custom-markdown-loader',
          },
        ],
      },
    ],
  },
};
2. 多入口配置

如果项目需要多个入口文件（例如，一个项目中有多个独立的单页应用），vue.config.js 的默认配置可能无法满足需求。

示例：

  • 一个项目中有两个独立的单页应用：app1 和 app2，需要分别打包。

解决方案：

在 Webpack 模板中，可以直接配置多入口：

javascript

复制

module.exports = {
  entry: {
    app1: './src/app1/main.js',
    app2: './src/app2/main.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist',
  },
};

在 vue.config.js 中，虽然可以通过 configureWebpack 实现，但配置较为复杂。

3. 自定义插件

如果项目需要使用一些特殊的 Webpack 插件，而这些插件无法通过 vue.config.js 轻松配置，可能需要直接操作 Webpack 配置。

示例：

  • 使用 webpack-bundle-analyzer 分析打包体积。

  • 使用 copy-webpack-plugin 复制静态资源到输出目录。

解决方案：

在 Webpack 模板中，可以直接在 webpack.config.js 中添加插件：

javascript

复制

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public/assets', to: 'assets' },
      ],
    }),
  ],
};
4. 自定义输出结构

如果项目需要自定义输出目录结构或文件名，而 vue.config.js 的默认配置无法满足需求，可能需要直接操作 Webpack 配置。

示例：

  • 将 CSS 文件输出到单独的目录。

  • 修改输出文件的命名规则。

解决方案：

在 Webpack 模板中，可以直接配置输出：

javascript

复制

module.exports = {
  output: {
    filename: 'js/[name].[contenthash].js',
    chunkFilename: 'js/[name].[contenthash].chunk.js',
    path: __dirname + '/dist',
  },
};
5. 自定义 DevServer 配置

如果项目需要深度定制开发服务器的行为（如代理、HTTPS、自定义中间件等），而 vue.config.js 的 devServer 选项无法满足需求，可能需要直接操作 Webpack 配置。

示例：

  • 使用自定义的中间件拦截请求。

  • 配置复杂的代理规则。

解决方案：

在 Webpack 模板中，可以直接配置 devServer：

javascript

复制

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
    before(app) {
      app.use((req, res, next) => {
        console.log('Request URL:', req.url);
        next();
      });
    },
  },
};
6. 自定义代码拆分策略

如果项目需要自定义代码拆分策略（如按路由拆分、按组件拆分等），而 vue.config.js 的默认配置无法满足需求，可能需要直接操作 Webpack 配置。

示例：

  • 将某些特定的库拆分为单独的 chunk。

  • 按路由动态加载组件。

解决方案：

在 Webpack 模板中，可以直接配置 optimization.splitChunks：

javascript

复制

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](lodash|moment)[\\/]/,
          name: 'vendors-lodash-moment',
          chunks: 'all',
        },
      },
    },
  },
};
7. 自定义 Source Map 配置

如果项目需要特殊的 Source Map 配置（如启用特定类型的 Source Map），而 vue.config.js 的默认配置无法满足需求，可能需要直接操作 Webpack 配置。

示例：

  • 在生产环境中启用 source-map 而不是 cheap-module-source-map。

解决方案：

在 Webpack 模板中，可以直接配置 devtool：

javascript

复制

module.exports = {
  devtool: 'source-map',
};
总结

以下是一些 vue.config.js 可能无法满足的特殊构建需求：

  1. 自定义 Loader。

  2. 多入口配置。

  3. 自定义插件。

  4. 自定义输出结构。

  5. 自定义 DevServer 配置。

  6. 自定义代码拆分策略。

  7. 自定义 Source Map 配置。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/949802.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

nginx-灰度发布策略(split_clients)

nginx-灰度发布策略(split_clients)

一. 简述： 基于客户端的灰度发布（也称为蓝绿部署或金丝雀发布）是一种逐步将新版本的服务或应用暴露给部分用户，以确保在出现问题时可以快速回滚并最小化影响的技术。对于 Nginx，可以通过配置和使用不同的模块来实现基于…
阅读更多...
【数据结构】栈与队列（FIFO）

【数据结构】栈与队列（FIFO）

在阅读该篇文章之前&#xff0c;可以先了解一下堆栈寄存器和栈帧的运作原理&#xff1a;<【操作系统】堆栈寄存器sp详解以及栈帧>。 栈(FILO) 特性: 栈区的存储遵循着先进后出的原则。 例子: 枪的弹夹&#xff0c;最先装进去的子弹最后射出来&#xff0c;最后装入的子弹…
阅读更多...
python基础案例

python基础案例

#一个年份如果能被4整除但不能被 100整除&#xff0c;或能被 400整除&#xff0c;那么这个年份就是闰年。 year int(input(请输入年份&#xff1a;)) if (year %40 and year %100!0) or year %4000:print("这个年份就是闰年") else:print("这个年份不是闰…
阅读更多...
微服务框架，Http异步编程中，如何保证数据的最终一致性

微服务框架，Http异步编程中，如何保证数据的最终一致性

一、背景 在微服务框架下&#xff0c;跨服务之间的调用&#xff0c;当遇到操作耗时或者量大的情况&#xff0c;我们一般会采用异步编程实现。 本文出现的问题是&#xff1a;异步回调过来时&#xff0c;却未查询到数据库中的任务&#xff0c;导致未能正常处理回调。 下面是当…
阅读更多...
Kafka详解 ③ | Kafka集群操作与API操作

Kafka详解 ③ | Kafka集群操作与API操作

目录 1、Kafka集群操作 1.1、创建 topic 1.2、查看主题命令 1.3、生产者生产 1.4、消费者消费数据 1.5、运行 describe topics命令 1.6、增加 topic分区数 1.7、增加配置 1.8、删除配置 1.9、删除 topic 2、Kafka的Java API操作 2.1、生产者代码 2.2、消费者代 2…
阅读更多...
Echarts集成Vue2个人总结与反思

Echarts集成Vue2个人总结与反思

协同净焦水处理系统 统计模块 环境部署 1、创建数据库ry-cloud并导入数据脚本ry_2021xxxx.sql&#xff08;必须&#xff09;&#xff0c;quartz.sql&#xff08;可选&#xff09; 2、创建数据库ry-config并导入数据脚本ry_config_2021xxxx.sql&#xff08;必须&#xff09; …
阅读更多...
aardio —— 虚表 —— 模拟属性框

aardio —— 虚表 —— 模拟属性框

写了个简单的属性框例程&#xff0c;抛砖引玉&#xff0c;期待你做出更丰富强大的功能。 本例演示&#xff1a;折叠子行、选择框、输入文本、输入数值、下拉选择、选择图片、选择颜色、选择字体等功能。 只有想不到&#xff0c;没有做不到&#xff0c;发挥你的想象力吧。 imp…
阅读更多...
《Vue3 七》插槽 Slot

《Vue3 七》插槽 Slot

插槽可以让组件的使用者来决定组件中的某一块区域到底存放什么元素和内容。 使用插槽&#xff1a; 插槽的使用过程其实就是抽取共性、预留不同。将共同的元素、内容依然留在组件内进行封装&#xff1b;将不同的元素使用 slot 作为占位&#xff0c;让外部决定到底显示什么样的…
阅读更多...
Functions

Functions

1.trigonometric function 定义和图像 反三角函数是三角函数的反函数 versin(verse -sin)&#xff1a;1/sinx 性质 三角函数的公式 三角恒等式 周期性公式&#xff1a;直接画图记 公式记忆&#xff1a;先想象一个在第一象限的锐角 1&#xff1a;在坐标轴中旋转360 2.sin&am…
阅读更多...
微服务-网关、配置热更新、动态路由

微服务-网关、配置热更新、动态路由

祝小伙伴们每天开心 每天都能进步一点点 目录 1 网关路由 1.1 认识网关 什么是网关捏 网关实现方案 1.2 快速入门 &#xff08;1&#xff09;引入依赖 &#xff08;2&#xff09;配置路由 1.3 路由过滤 路由规则语法 常见属性 predicates&#xff08;路由断言&…
阅读更多...
uni-app 资源引用（绝对路径和相对路径）方法汇总

uni-app 资源引用（绝对路径和相对路径）方法汇总

文章目录 一、前言&#x1f343;二、绝对路径和相对路径2.1 绝对路径2.2 相对路径 三、引用组件四、引用js4.1 js 文件引入4.2 NPM支持 五、引用css六、引用json6.1 json文件引入 七、引用静态资源7.1 模板内引入静态资源7.2 css 引入静态资源7.3 js/uts 引入静态资源7.4 静态资…
阅读更多...
机器学习基础-支持向量机SVM

机器学习基础-支持向量机SVM

目录 基本概念和定义 1. 超平面&#xff08;Hyperplane&#xff09; 2. 支持向量&#xff08;Support Vectors&#xff09; 3. 线性可分 4. 边界 SVM算法基本思想和分类 基本思想 间隔最大化 间隔&#xff08;Margin&#xff09; 软边距 SVM 核函数的概念 基本概念…
阅读更多...
TypyScript从入门到精通

TypyScript从入门到精通

TypyScript从入门到精通 TypyScript 是什么&#xff1f;增加了什么环境搭建二、为何需要 TypeScript三、编译 TypeScript四、类型声明五、类型推断基本类型六、类型总览JavaScript 中的数据类型TypeScript 中的数据类型1. 上述所有 JavaScript 类型2. 六个新类型&#xff1a;3.…
阅读更多...
mybatisX插件的使用，以及打包成配置

mybatisX插件的使用，以及打包成配置

装mybatisX插件&#xff1b; idea连接数据库&#xff1b; 点击mybatisx-generator&#xff0c;设置自己装mybatisX插件&#xff1b; idea连接数据库&#xff1b; 点击mybatisx-generator&#xff0c;设置自己要的包和类&#xff1b; 如果要把自己的配置设置成一个自定义模板&a…
阅读更多...
简单的jmeter数据请求学习

简单的jmeter数据请求学习

简单的jmeter数据请求学习 1.需求 我们的流程服务由原来的workflow-server调用wfms进行了优化&#xff0c;将wfms服务操作并入了workflow-server中&#xff0c;去除了原来的webservice服务调用形式&#xff0c;增加了并发处理&#xff0c;现在想测试模拟一下&#xff0c;在一…
阅读更多...
Java后端常用的4种请求方式(通俗易懂)

Java后端常用的4种请求方式(通俗易懂)

文章目录 前言通用接口类(ControllerDemo)通用实体类(UserEntity)通用响应类(HttpClientResult)成功截图(先启动项目,然后右键执行main方法) HttpClientHttpClient 的主要类代码案例导入依赖工具类(HttpClientUtil)测试类 HttpURLConnection简介调用步骤代码案例导入依赖工具类…
阅读更多...
floodfill算法_dfs

floodfill算法_dfs

之前我们用BFS解决floodfil算法 BFS 解决 FloodFill 算法_图像渲染_岛屿数量_被围绕的区域-CSDN博客 下面我们用dfs进行解决 733. 图像渲染 从初始位置开始dfs&#xff0c;找和它值相同的&#xff0c;并在dfs过程中把值改为目标值。因为会改变原数组&#xff0c;不用vis记录经过…
阅读更多...
40% 降本：多点 DMALL x StarRocks 的湖仓升级实战

40% 降本：多点 DMALL x StarRocks 的湖仓升级实战

小编导读&#xff1a; 多点 DMALL 成立于2015年&#xff0c;持续深耕零售业&#xff0c;为企业提供一站式全渠道数字零售解决方案 DMALL OS。作为 DMALL OS 数字化能力的技术底座&#xff0c;大数据平台历经多次迭代平稳支撑了公司 To B 业务的快速开展。随着国家产业升级和云原…
阅读更多...
AI-Talk开发板之超拟人

AI-Talk开发板之超拟人

一、说明 运行duomotai_ap sdk下的LLM_chat例程&#xff0c;实现开发板和超拟人大模型进行语音交互&#xff0c;支持单轮和多轮交互。 二、SDK更新 v2.3.0及以上的SDK版本才支持超拟人&#xff0c;如果当前SDK在v2.3.o以下&#xff0c;需要更新SDK。在SDK目录(duomotai_ap)下…
阅读更多...
graylog+sidecar通过docker-compose部署并采集SSH登录日志

graylog+sidecar通过docker-compose部署并采集SSH登录日志

文章目录 前言一、graylog日志系统数据流向清洗图二、资源准备及部署1.docker-compose部署2.准备docker-compose.yml文件3.安装graylog-sidecar并配置4.给sidecar创建token 三、graylog-WEB配置采集SSH日志1.配置Inputs2.创建sidecar采集器3.将页面创建好的sidecar与服务器绑定…
阅读更多...
最新文章

Copyright @ 2022~2023