vue-cli 3 webpack多环境打包

配置多环境打包

在根目录下添加几个文件

1.添加 .env

NODE_ENV = development
VUE_APP_BASEURL = 'window.location.origin'  // 网络请求地址

2.添加.env.prod

NODE_ENV = production
VUE_APP_URL = prod
VUE_APP_BASEURL = 'window.location.origin'  // 网络请求地址

3.添加.env.beta

NODE_ENV = production
VUE_APP_URL = beta
VUE_APP_BASEURL = 'window.location.origin'  // 网络请求地址

修改 vue.config.js

module.exports = {
  publicPath: process.env.VUE_APP_URL
}

修改 index.js

export default new Router({
  base: process.env.VUE_APP_URL
})

修改package.json

"scripts": {
    "serve": "vue-cli-service serve --mode",
    "build": "vue-cli-service build --mode prod",
    "beta": "vue-cli-service build --mode beta",
  },

到这里，多环境已经配置完毕

项目中可以通过 process.env.[key] 去做权限判断

默认打包后的文件名字是 dist 如果想要指定名称，你可以这样做

1.修改启动命令在后面加上 --dest [name]
例如我想要打包后的名字是 beta

"beta": "vue-cli-service build --mode beta --dest beta",

2.修改 .gitignore

.DS_Store
···
/beta

这个操作是为了防止提交代码时将部署文件一并提交

如果你发现打包后的体积超级大

修改NODE_ENV = 'production' --> NODE_ENV = production

完美，这就是全部的解决方案了！！！