Vue通过chainWebpack自定义使用main-dev.js和main-prod.js

最新推荐文章于 2023-02-13 20:28:08 发布

兮夏-

最新推荐文章于 2023-02-13 20:28:08 发布

阅读量551

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_46693606/article/details/118528346

版权

本文介绍了如何在Vue项目中根据环境（开发/生产）选择不同的打包入口。通过创建main-dev.js和main-prod.js，并在vue.config.js中利用process.env.NODE_ENV判断当前环境，清除原有入口并添加对应环境的主文件，实现环境配置的灵活切换。

摘要由CSDN通过智能技术生成

案例
通常我们在开发环境和生产环境的项目打包配置都是有所不同的
那么我们该怎么去指定在什么环境使用什么打包入口呢？
解决方法
首先我们把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')
    })
  }
}