vue-cli3分环境打包项目
vue-cli3没有webpack配置文件,所以要区分线上和测试环境,要通过process.env.VUE_APP_TITLE来区分环境
具体为:
1、在项目根目录增加两个文件
内容为:
.env.prod:
1 NODE_ENV = 'production' 2 VUE_APP_TITLE = 'prod' 3 VUE_APP_DOMAIN = 'insapp.hsbxjj.com'// 可设置生产环境域名 使用时通过 process.env.VUE_APP_DOMAIN获取
.env.test:
1 NODE_ENV = 'production' 2 VUE_APP_TITLE = 'test' 3 VUE_APP_DOMAIN = 'insapptest.hsbxjj.com' //可设置测试环境域名 使用时通过 process.env.VUE_APP_DOMAIN获取
2、在配置文件package.json中配置script
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test", //运行 npm run test 打测试环境的包
"prod": "vue-cli-service build --mode prod" //运行 npm run prod 打生产环境的包
},
如果想增加其他需要区分环境的变量,在env.prod和.env.test增加即可,或者新建一个文件,做统一处理
let object={}; switch (process.env.NODE_ENV) { case 'development':
object.key=''; //根据业务增加,例如可以设置测试环境的埋点的key object.baseUrl = "" //这里是本地的请求url break; case 'test': // 注意这里的名字要和步骤二中设置的环境名字对应起来
object.key=''; //根据业务增加,例如可以设置测试环境的埋点的key
object.baseUrl = "" //这里是测试环境中的url
break; case 'production':
object.key=''; //根据业务增加,例如可以设置生产环境的埋点的key
baseUrl = "" //生产环境url
break ;
} export default baseUrl;