vue全家桶进阶之路50：Vue3 环境变量+跨域设置实例-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue全家桶进阶之路50：Vue3 环境变量+跨域设置实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用.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文件,可以减少编译后代码的体积
}