1 问题
在公司内部开发项目中，一般不会只有一个供开发使用的地址（因为项目最终会有一个项目的上线地址，和一个在项目开发过程中的开发(测试)地址），而我们项目完成之后，需要进行打包，这时候不能将开发地址打包进入项目，但是又不能直接修改后打包，毕竟每次开发又要切换为开发地址，实在麻烦。
这种情况就需要用到 node 中的 环境变量 来动态的决定当前地址
2 声明定义环境变量的文件
在项目的根目录下创建两个环境配置文件
.env.production --> 生产环境声明文件
.env.development ---> 开发环境声明文件
3 分别创建环境变量
- 开发
# 开发
NODE_ENV = development
# http url
VUE_APP_BASE_URL = 'http://127.0.0.1:20'
- 生产
# 生产
NODE_ENV = production
# http url
VUE_APP_BASE_URL = 'http://mimenge.top'
这里配置的
NODE_ENV 是供webpack识别声明文件的
VUE_APP_ 前缀是供webpack识别对应环境变量的
也可以自定义一些在不同环境下的变量，只要是使用规定前缀的，在对应环境下识别
测试
首先在package.json文件下配置命令 (在命令后指定mode)
"scripts": {
"dev": "vue-cli-service serve --mode development",
"pro": "vue-cli-service serve --mode production",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
dev 命令 ： 开发模式启动服务 对应识别 开发环境 pro 命令 ： 生产农事启动服务 对应识别 生产模式 build 命令 ： （生产） 模式打包， 识别生产环境
使用
通过全局的 process.env.VUE_APP_变量来查看环境
app.vue
<script lang='ts'>
mounted(){
// 查看环境地址 和 所属环境
console.log(process.env.VUE_APP_BASE_URL, process.env.NODE_ENV)
}
</script>
最后只需要在对应 requiest 请求服务配置中替换成当前变量即可
开发
生产
--------end----------
