vue根据环境自动更换打包地址

姥姥家的饭

已于 2023-07-28 10:53:57 修改

阅读量814

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2019-12-16 15:01:43 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41950190/article/details/103562125

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种在Vue项目中自动切换环境配置的方法，通过判断当前访问域名来自动选择正确的服务器地址，避免了手动修改环境配置的繁琐，提高了开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中测试环境和线上环境打包的时候每次都需要手动更换打包地址导致有时候忘记需要重写打包；
自动更换打包地址：原理很简单判断访问域名更换地址；

//1.定义所有环境服务器地址
const server={
    pro:"https://pro.xxx.com/api/",//生产环境
    dev:"http://dev.xxx.com/api/",//测试环境
    util:"http://util.xxx.com/api/"//其他环境，可以为空，为空则适配到测试环境
}
//2.获取当前访问域名，并根据域名判断当前环境，然后获取指定环境的服务器地址
var DOMIN="";//服务端接口访问跟路径
const origin=location.hostname//当前访问域名
for(var i in server){
    var item=server[i]
    if(item.indexOf(origin)>-1){
        DOMIN=item
    }
}
//3. 特殊情况处理，如果没有在server变量中匹配到具体环境，则依次读取util、dev
if(!DOMIN) DOMIN=server.util?server.util:server.dev
console.log("DOMIN",DOMIN)
export default
{
  DOMIN
}