很多项目在生产和开发环境相关的配置是不一样的，为了便于开发维护，可以将生产和开发配置文件分离，按需使用配置文件。

1. 简介

  • 通过vue.config.js修改webpack默认配置

通过vue-cli工具生成的项目，默认隐藏了所以webpack的配置，目的是屏蔽项目配置过程，让程序员把工作重心放在代码逻辑上。
此时需要在项目的根目录中创建vue.config.js配置文件，自动以打包发布的配置

  • 参考地址

https://cli.vuejs.org/zh/config/#vue-config-js

  • 在默认情况下，vue项目的开发和生产模式使用同一个打包的入口文件（src/main.js），为了在开发和生产过程配置分离，可以分为两种模式，各自制定打包入口文件，即：

开发模式的入口文件为src/main-dev.js
生产模式的入口文件为src/main-prod.js

  • 在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置

chainWebpack通过链式编程修改webpack配置
configureWebpack通过操作对象的形式修改webpack配置

  • 两者区别介绍文档：

https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7

2. 配置过程

  • 通过chainWebpack自定义打包入口（修改vue.config.js文件配置）

    1. module.exports={
    2. // 如果打包文件资源路径没有dist,添加如下配置
    3. publicPath: '',
    4. chainWebpack:config =>{
    5.   // 生产环境
    6.   config.when(process.env.NODE_ENV === 'production', config => {
    7.     config.entry('app').clear().add('./src/main-prod.js')
    8.   })
    9.   // 开发环境
    10.   config.when(process.env.NODE_ENV === 'development', config => {
    11.     config.entry('app').clear().add('./src/main-dev.js')
    12.   })
    13. }
    14. }

  • 将原有的main.js改为main-prod.js和main-dev.js

  • 最后分别执行npm serve和npm run build测试