vue配置环境变量

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

概述

环境配置是常见的问题：

需求：

设计思路

实现思路分析

1.URL管理

在vue项目根目录下创建三个文件

.env 无论开发环境还是生成环境都会加载

.env.development 开发环境加载这个文件

.env.production 生成环境加载这个文件。

2.网页

.env 文件内容：

NODE_ENV = production

.env.development 文件内容：

NODE_ENV = development

VUE_APP_BASE_URL = http://localhost:3000/

.env.production 文件内容：

NODE_ENV = production

VUE_APP_BASE_URL = http://www.xxx.com/

3.加载.env

首先加载.env文件，判断当前的项目环境，

如果是开始环境，则继续加载.env.development的内容，

如果是生产环境，则加载.env.production的内容,

4.分析

如在ide中使用npm run serve调试，则加载的是.env.development文件
如果执行npm run build 之后发布到服务器，则加载的是.env.production文件

pageage.json的scripts部分如下

“scripts”: {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"
1
2
3
4
5

},
加上测试的话：
“scripts”: {
“dev”: “vue-cli-service serve --open”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“test:unit”: “vue-cli-service test:unit”,
“test:e2e”: “vue-cli-service test:e2e”
},
在项目main.js文件可以打开查看当前的系统变量：

console.log(‘process.env’,process.env)

设置完之后，在开始的vue.config.js代理文件中，将target指向改为： process.env.VUE_APP_BASE_URL

之后，vue会根据执行环境的不同自动加载相应的接口地址

参考资料和推荐阅读

[1]. http://t.zoukankan.com/eye-like-p-13305801.html

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~