Vue项⽬如何区分开发还是⽣产环境切分不同环境接⼝（环境识别）
1.为什么要配置不同的接⼝地址
⽬前，由于我在开发过程中，前端请求访问的是我本机启动的后台服务，此时涉及到跨域（因为端⼝不⼀样），所以就在config/index.js⽂件中配置了代理，如下：
意思就是说凡是以api开头的请求，会帮我转到8089端⼝去获取数据。所以前端的请求都统⼀写成'api'+'接⼝名'
但是在⽣产环境下，我们不需要在接⼝前⾯加api发送请求，所以我们需要判断开发环境和⽣产环境，然后写相应接⼝。
2.具体配置
在项⽬中到以下两个⽂件：
v.js  和  v.js
2.1在v.js⽂件中加⼊⼀⾏代码：API_ROOT: ' "//localhost:8080/api" '
2.2在v.js⽂件中加⼊⼀⾏代码： API_ROOT: ' "" '
3.在src/main.js⽂件中配置全局变量（挂在vue原型上）
所以在axios请求的时候，可以直接⽤this.baseURL+api :
.env 默认全局配置⽂件
.env.development 开发环境配置⽂件
.env.production ⽣产环境配置⽂件
⽂件名为Vue的约定，不可随意更改
配置环境变量格式
VUE_APP_{⾃定义环境变量名} = {值}
其中“VUE_APP_”是规定的环境变量名前缀，如果变量名不是以此开头，则在程序中不能调⽤此环境变量
例如在.env⽂件中写⼊：
VUE_APP_UserNumber = 12345
VUE_APP_UserString = "ABCDE"
XJL = "XJL"
jsp和vue开发的优缺点process是nodeJs的全局变量，其中包含了env的属性，Vue项⽬启动时会⾃动读取.env⽂件中的环境变量
即可在Vue.js中可如此调⽤:
console.v.VUE_APP_UserNumber);
console.v.VUE_APP_UserString);
console.v.XJL);
运⾏后，console输出:
12345
ABCDE
undefined
Vue 源码会根据 v.NODE_ENV 决定是否启⽤⽣产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有⽅法来覆盖此变量，以启⽤ Vue 的⽣产环境模式，同时在构建过程中警告语句也会被压缩⼯具去除。
如果是开发模式，Vue会⾃动读取.env和.env.development两个⽂件，.env.development⽂件内定义的环境变量会覆盖.env⽂件内同名的环境变量；如果是⽣产环境则是.env.production ⽂件内定义的环境变量会覆盖.env⽂件内同名的环境变量.例如：
.env⽂件内容
VUE_APP_UserNumber = 12345
VUE_APP_UserString = "ABCDE"
VUE_APP_From = ".env"
.env.development⽂件内容
VUE_APP_From = ".env.development"
.env.production⽂件内容
VUE_APP_From = ".env.production"
在Vue.js中可如此调⽤:
console.v.VUE_APP_UserNumber);
console.v.VUE_APP_UserString);
console.v.From);
开发模式下输出：
12345
ABCDE
.env.development
⽣产模式下输出:
12345
ABCDE
.env.production

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。