vue-cli3:区分开发、测试、生产环境

8 篇文章 0 订阅

vue-cli3相比于2取消了build和config文件夹,需要自己创建.env文件区分不同的环境

官方文档地址:https://cli.vuejs.org/zh/guide/mode-and-env.html

1、在根目录下创建一个.env.development 是开发环境

VUE_APP_URL = 'https://www.easy-mock.com/mock/5d6cbe39fb84500aa8f810fe/vuetest'
VUE_APP_xxx = '可以自己定义你需要的变量,但是要以VUE_APP_开头'

可以在main.js中打印,看一下是否添加成功,打印之前要重新 npm run serve

console.log(process.env)

打印结果:

2、创建.env.test 为测试环境

代码同上,更改 VUE_APP_URL 为你的测试环境api域名

3、创建.env.production 为生产环境,同上

4、最后,要在package.json中添加一个test打包命令,

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

启动/打包命令,可以在本地或者Jenkins配置中修改

开发:npm run serve

测试:npm run test

生产:npm run build

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值