vuecli项目动态配置不同环境变量

原创已于 2023-02-15 16:20:58 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

于 2022-07-26 10:22:09 首次发布

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

vuecli

1 篇文章

订阅专栏

本文档介绍了如何使用VueCLI配置不同环境（开发、测试、生产）的变量，无需额外安装插件。主要步骤包括在package.json中设置scripts，创建.env.development、.env.test和.env.production文件来定义不同环境的配置，如接口地址。在执行npm run serve、npm run test和npm run build命令时，项目会根据指定的模式加载相应的环境变量。

官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

vuecli项目动态配置不同环境下变量，无需下载任何插件：
1.package.json文件里：
“scripts”: {
“serve”: “vue-cli-service serve --mode development”,
“build”: “vue-cli-service build --mode production”,
“test”: “vue-cli-service build --mode test”,
“lint”: “vue-cli-service lint”
}
在这里插入图片描述

2.最外层目录下（package.json同级文件夹下）新建三个文件：
在这里插入图片描述

.env.development文件代表开发环境配置：

在这里插入图片描述

.env.test文件代表测试环境配置：
NODE_ENV = ‘production’
VUE_APP_MODE = ‘test’
VUE_APP_BASE_API = ‘https://xxx.xxxx.com/tkp-wechat-experience’//测试环境请求接口路径

.env.production文件代表生产环境配置：
NODE_ENV = ‘production’
VUE_APP_MODE = ‘production’
VUE_APP_BASE_API = '‘https://xxx.xxxx.com/tkp-wechat-experience’//生产环境请求接口路径

注意：测试环境和生产环境NODE_ENV默认都是 ‘production’，
自己新建变量时必须以VUE_APP_开头，并且需重启项目才能生效。

3.执行命令时：
npm run serve 本地启动
npm run test 打测试包
npm run build 打生产包