关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

vue-cli测试环境和生产环境分开打包

发布2022-03-21 浏览1169次

详情内容

在vue-cli npm run build是打包生产环境,但有时只是在测试服务器上测试需要不同的配置参数,想根据不同env文件来打包,不用频繁修改配置参数改来改去。可通过不同的env配置配置文件来实现

根目录创建.env.dev、.env.test、.env.pro文件(开发、测试、生产)

文件内容及字段说明

  • NODE_ENV:可以设置为其他值,比如"test",但是打包后的目录结构和"production"不一样,所以还是设置为"production",通过"VUE_APP_MODE"变量来区分环境 

  • VUE_APP_MODE:线上测试环境

  • VUE_APP_API_URL:api调用地址


3. .env.dev 内容

// dev环境环境标记 
VUE_APP_MODE=dev
 
NODE_ENV=development
 
// dev环境 url请求路径
VUE_APP_URL=http://192.168.0.193:7000

5. .env.test 内容

// 生产环境环境标记 package.json用
VUE_APP_MODE=test
 
NODE_ENV=production
 
// 生产环境 url请求路径
VUE_APP_URL=http://192.168.0.233:7000

注意.env.test里的NODE_ENV需要定义为production生产环境

6. 修改package.json文件

 
        "buildDev": "vue-cli-service build --mode dev",
        "test": "vue-cli-service build --mode test",
        "buildProd": "vue-cli-service build --mode prod"

7.其他说明
再次说明一下为什么是用process.env.VUE_APP_MODE来判断,而不是用process.env.NODE_ENV,如果我们在.env.test文件中把NODE_ENV设置为test的话,那么打包出来的目录结构是有差异的,差异如下图

image.png

点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载