vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例

  • vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例已关闭评论
  • 134 次浏览
  • A+
所属分类:Web前端
摘要

使用.env加后缀的方式来建立某个模式下的环境变量,例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境):

使用.env加后缀的方式来建立某个模式下的环境变量,

例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境):

.env.development  .env.production

 在新建的两个环境变量文件中设置相同的环境变量名:

VUE_APP_BASE_API

环境变量名称必须以"VUE_API_"+名称的格式,否则不生效,这个格式是死的。至于后面部分就是自定义部分。

重点来了,我们为什么要建立这两个环境变量的文件,那是因为能解决我们在开发的时候来回改动服务器的困扰,有了这两个环境变量文件,当运行(npm run serve)的时候自动调取开发环境的变量,当打包(npm run build)的时候就会调取生产环境的变量,这样一来总是改动了,即使以后更换了服务器,只要在这两个地方修改即可。

.env.development文件命令:

#接口服务地址 VUE_APP_SERVICE_URL='http://localhost:8001/' #开发环境路径前缀 VUE_APP_BASE_API='/dev-apis'

.env.production文件命令:

#生成环境路径前缀 VUE_APP_BASE_API='/prod-apis'

vue.config.js文件命令调用环境变量:

环境变量的获取使用"process.env."+环境变量名称的方式,例如:

process.env.VUE_APP_BASE_API

一下是完整设置

module.exports={     devServer:{         port:8888,//前端端口         open:true,//运行后浏览器自动弹出         https:false,//不采用https加密方式         host:"localhost",//前端主机,也可以是127.0.0.1,如果能被外界访问可以设置为0.0.0.0         proxy:{             [process.env.VUE_APP_BASE_API]:{//环境变量                 target:process.env.VUE_APP_SERVICE_URL,//后端服务器,即:API服务器                 changeOrigin:true,//是否允许跨域                 pathRewrite:{//请求路径重写                     ['^'+process.env.VUE_APP_BASE_API]:''//匹配开头为环境变量值的字符串,后面设置空字符串。                 }             }         }     },     lintOnSave:false, //关闭格式检查     productionSourceMap:false //在生产环境中不生成source map文件,可以减少编译后代码的体积 }