前言
在使用Vue框架的时候, 经常需要用到多种环境, 比如开发环境和线上测试环境, 而不同环境中的后端接口也不太一样, 那么我们就需要在打包自动的去切换相应的环境变量.
实现
1. 安装依赖
2. 创建.env.development 和 .env.production
.env.development 文件内容如下:
1
2
3
4
5
|
ENV = 'development'
VUE_APP_BASE_API = 'http://127.0.0.1:8000/'
|
.env.production 文件内容如下:
1
2
3
4
5
|
ENV = 'production'
VUE_APP_BASE_API = '/prod-api'
|
3. 设置项目启动或者打包时默认环境
在 Vue CLI 项目中, 默认情况下有三种模式
1
2
3
| 1. development 模式用于 vue-cli-service serve
2. production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
3. test 模式用于 vue-cli-service test:unit
|
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：
你可以在你的项目根目录中放置下列文件来指定环境变量：
1
2
3
4
| .env
.env.local
.env.[mode]
.env.[mode].local
|
4. 覆盖默认的环境变量
- 新建文件
.env.staging
1
2
3
4
5
6
7
| NODE_ENV = production
ENV = 'staging'
VUE_APP_BASE_API = '/stage-api'
|
- 覆盖默认模式
package.json
1
2
3
| "scripts": {
"build:stage": "vue-cli-service build --mode staging"
},
|
参考文档
- 模式和环境变量
