vue项目如何通过前端实现自动识别并配置服务器环境地址

前言:

一般来说,一个web项目的生产环境和测试环境的服务器地址一旦确定下来,很少会频繁变动的。那么就可以单独写一个脚本文件,通过当前访问的域名来判断当前的访问环境,然后再通过一定的规则获取对应的服务器地址。如此一来,只要设计好服务器地址适配文件,那么只需要打一次包,就可以自动区分不同的服务器环境了。你不用再为每次打包上传不同环境都要手动改服务器地址而烦恼,也不会再出现忘了改配置文件而连接到错误的服务器上。

解决方案:

配置所有环境服务器地址变量——获取当前访问域名——根据域名判断是否包含在服务器地址变量中,如果有则使用该服务器地址,否则使用默认配置地址。

示例代码:

//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
}

对于这种方案,可以很方便的在服务器端直接修改 server 对象中对应环境的值,无论是协议头、域名还是端口都可以在服务器上直接修改而不用再次打包。

还有更好的方案么?

上边的方案中,在同一个脚本中定义了环境服务器地址对象和环境判断适配的业务逻辑,如果直接把这个给后端同事去修改,那么还是有一定风险的。那么最好还是把服务器环境地址的配置写到一个json文件中,这样直接给后端同事修改配置文件就好了,这样就不会动到业务逻辑了。示例代码如下:

server.json

{
  "pro":"https://pro.xxx.com/api/",
  "dev":"http://dev.e-mallchina.com/api/",
  "util":"https://xxx.xxx.com:8080/api/"
}

utils.js

var DOMIN="";//定义服务端接口访问跟路径变量
const origin=location.hostname//当前访问域名
//读取服务器地址配置文件
$.ajax({
    url:"./static/utils/server.json",
    async:false,
    dataType:"json",
    success:function(server){
        //遍历服务器地址配置文件,根据当前访问域名判断环境,然后获取指定的服务器地址
        $.each(server, function(key,data) {
            if(data.indexOf(origin)>-1){
                DOMIN=data
            }
        });
        //如果没有匹配到指定的服务器地址,那么依次取util/dev(util可以为空)
        if(!DOMIN) DOMIN=server.util?server.util:server.dev
    }
});
export default
{
  DOMIN
}

注意:

读取json文件时,需设置为同步,即 async:false ,不然是无法赋值到外边的DOMIN变量的。

更保险的方案:

一般来说,生产环境的服务器地址都是不会轻易修改的,那么可以把生产环境的服务器地址写在业务逻辑处理文件中,配置文件只开放测试环境和其他环境给后端,然后在业务逻辑处理文件中做好异常兼容处理,那么随便后端折腾这个配置文件也不会影响到生产环境了。

server.json

{
  "dev":"http://dev.xxx.com/api/",
  "util":"http://xxx.xxx.com:8080/api/"
}

utils.js

var DOMIN = ""; //定义服务端接口访问跟路径变量
const proServer = "https://xxx.xxx.com/api/"
const origin = location.hostname //当前访问域名
//根据当前访问域名判断并获取对应环境的服务器地址
if(proServer.indexOf(origin) > -1) {
    //生产环境
    DOMIN = proServer
} else {
    //非生产环境则读取服务器地址配置文件
    $.ajax({
        url: "./static/utils/server1.json",
        async: false,
        dataType: "json",
        success: function(server) {
            //遍历服务器地址,判断当前访问环境并获取对应的服务器地址
            $.each(server, function(key, data) {
                if(data.indexOf(origin) > -1) {
                    DOMIN = data
                }
            });
            //如果没有匹配到指定的服务器地址,那么依次取util/dev(util可以为空)
            if(!DOMIN) DOMIN = server.util ? server.util : server.dev
            //未获取到服务器地址的异常处理
            if(!DOMIN) {
                alert("服务器地址配置错误,请检查")
            }
        },
        error: function(xhr) {
            alert("服务器地址文件访问错误: " + xhr.status + " " + xhr.statusText);
        }
    });
}
export default {
    DOMIN
}

注意:上边已经做了异常处理,虽然不做也可以,还是建议保留这几行代码,对后端同事会比较友好一些。

原文地址:https://www.cnblogs.com/xyyt/p/10362814.html

时间: 2024-10-07 18:11:36

vue项目如何通过前端实现自动识别并配置服务器环境地址的相关文章

Vue项目无法使用局域网IP直接访问的配置方法

一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接用局域网 IP 访问,方法如下: 给 dev 添加--host 0.0.0.0 属性: "scripts": {   "dev": "webpack-dev-server --inline --progress --config build/webpack.d

Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/assets/css/global.css') //上面两种都可以实现全局样式的导入,但是第二种容错率较好,更健壮,比较常用,第一种对环境要求比较高 全局js样式,也是首先要在静态assets文件中写好,然后再main.js中进行配置 // main.js //配置全局settings.js imp

前端学习之Vue项目使用

目录 一.Vue项目介绍 二.组件相关知识点 三.路由相关知识点 路由配置 上一篇我们说了Vue项目平台搭建以及Vue项目目录说明,这篇我们说一下如何使用Vue项目进行前端项目开发 一.Vue项目介绍 Vue是一个单页面页用,我们用到的html在public文件夹下 入口文件 根组件 页面组件 路由配置文件 二.组件相关知识点 ''' 1.vue项目的请求生命周期:main.js完成环境的加载与根组件的渲染:router的index.js完成路由映射 2.<router-view />标签作为

基于vue项目前端报错监控

最近要做一个vue项目的监控,来实时监听正式环境的异常,并且快速响应进行bug修改,其实vue项目报错主要从下面三个方法进行错误收集 1. window.addEventListener('unhandledrejection', event => { event.promise.catch((e) => { utils.errorCatch(e, 3) }) }) 2. window.onerror = function (errorMessage, scriptURI, lineNo, c

Vue项目部署遇到的问题及解决方案

写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()

vue 项目 webstrom IDE格式化代码规则遵循eslint设置

首先vue-cli生成了一个项目,开启了eslint的检测, 但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错. 解决办法一: 编辑器打开文件 首先,在编辑器里面要启用eslint 插件 在 .eslintrc.js 上右键,菜单底部有一个 "Apply ESLint Code Style Rule" 点它,之后自动格式化就会按照 eslint 的规则了 解决办法二: webstorm 设置页面->Editor->Code Style里面

vue-小爱ADMIN系列文章(二):微信微博等分享,国际化,前端性能优化,nginx服务器部署

最近在做我的小爱ADMIN后台管理系统,结合当前市场后台管理系统对相关功能的需求,我又开始新增了一些新的功能和组件,如分享功能组件,项目国际化功能:项目完成后,部署在nginx服务器,发现首次访问的速度特别慢,严重的影响了用户体验,因此,我又开始进行了一系列的前端性能优化;以及将优化后的项目部署到nginx服务器二级子目录的注意细节. 效果演示地址 github地址 分享功能 背景说明 用微信,微博等做网站的第三方登录及用微信和支付宝进行支付,都需要注册开发者账号和添加网站应用,比较麻烦.另外,

vue环境配置脚手架环境搭建vue工程目录

首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd  输入node -v  检查是否已经安装成功.如果会显示版本信息,说明安装成功! 现在就可以使用node中的npm包管理器来构建vue项目 第一步,由于npm直接下载资源网速会比较慢,可以用淘宝镜像来代替,运行命令 npm install -g cnpm --registry=https://registry.npm.tao

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化