webpack 配置cross-env,一套代码打包两个项目

395 阅读1分钟

遇到一个需求,要用以前的一套项目代码,稍作新增和删减后,快速部署另一套项目,因为两个项目要用同一套代码,我们只能在打包工具上动手了

配置

//引入cross-env
npm install cross-env -D

//package.json 增加打包入口
"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev:new": "cross-env IS_NEW=true vue-cli-service serve",
    "build:new": "cross-env IS_NEW=true vue-cli-service build",
}


// vue.config.js 配置 cross-env
chainWebpack(config) {
    config.plugin('define').tap((args) => {
      args[0]['process.env'] = JSON.stringify(process.env)
      return args
    })
}

使用示例

// main.js

const isNew = process.env.IS_NEW
let router = null
import oldRouter from './router/index'
import newRouter from './router/newRouter'

if (isNew) {
  router = newRouter
} else {
  router = oldRouter
}

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})