Vue + ElementUI的电商管理系统实例23 项目优化-通过chainWebpack自定义打包入口

项目优化策略

4、通过chainWebpack自定义打包入口

代码示例如下：

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config =>{
    config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development', config =>{
    config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

先把 main.js 文件，重命名为 main-dev.js，再复制里面的内容，新建 main-prod.js 文件，粘贴刚复制的内容。

打开 vue.config.js 文件：

module.exports = {
  chainWebpack: config => {
    // 发布阶段的打包入口
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发阶段的打包入口
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

然后回到可视化UI中的 serve ，先停止，再重新运行项目。编译成功。

build 中，点击运行，也可以编译成功。