配置多环境打包
在根目录下添加几个文件
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
完美，这就是全部的解决方案了！！！
