vue如何在多个不同服务器下访问不同地址

 更新时间:2022年04月14日 15:16:38   作者:wzp6010625  
这篇文章主要介绍了vue如何在多个不同服务器下访问不同地址,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

一、前言

通常 vue 在本地启动时,访问的后端地址是同事的机器或者线上一个环境(通常叫开发环境)。假如服务器有多个环境:开发、测试、培训、生产……这样每次发版前,都要手动在 git 仓库修改后端地址,就很麻烦。

所以想要实现一个目的:不修改代码,通过执行不同命令,发布不同环境

二、实现思路

仅针对 npm run build 打包后放到服务器运行的项目,对于直接把源码放在服务器执行 npm run dev 的项目,参照本文思路,修改 build / webpack.dev.conf.js 文件中,process.env 的赋值过程即可。

把不同服务的地址都配置出来,发布不同环境时,执行不同脚本,这样来获取相应的地址。

三、实践

1. 获取axios请求地址

process 是 Vue 中一个全局变量,利用这一点,我们可以从它上边取服务器地址,赋值给 baseURL,取到后既可以封装到 axios 中,也可以作为他用。代码如下:

const baseURL = process.env.BASE_API;        // BASE_API是我们自定义的一个属性,名称随意,只要保证所有地方一致就行

至于在哪里定义 BASE_API ,下面步骤会讲到。

2. 配置不同服务器的地址

2.1 在 config 文件夹下,会看到几个 xxx.env.js 的文件,dev 和 prod 默认就有。

每一个文件,把它当作不同的环境,如 dev 代表开发,prod 代表生产。

如果还有其他环境,比如培训环境,就把 prod.env.js 复制一份(复制 prod 不是 dev),命名为 train.env.js (名字自定义)。

2.2 修改 xxx.env.js 中内容,以生产环境为例,配置一个 BASE_API (就是第1步所用到的),值就是服务器地址。

注意这里的值是单引号嵌套双引号,少一层嵌套是无效的

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    BASE_API: '"https://www.***.com"'
}

2.3 还记得刚刚创建的 train.env.js (如果没有新建的可跳过这一步),对于这种手动创建的,要改一下 NODE_ENV,不然就和生产重名了。

'use strict'
module.exports = {
    NODE_ENV: '"train"',    // production改为自定义名字
    BASE_API: '"https://www.***.com"'
}

3. 打包时根据 process.env.NODE_ENV 判断不同环境

build 文件夹下,webpack.prod.conf.js,找到为 const env = 这段(代码第14行),改成如下形式

const env = (function() {
    const NODE_ENV = process.env.NODE_ENV;
    if (NODE_ENV === 'testing') {
        return require('../config/test.env')
    } else if (NODE_ENV === 'train') {    // 这个就是刚刚自定义的环境
        return require('../config/train.env')
    } else {    // 默认用生产环境
        return require('../config/prod.env')
    }
}())

4. 清除默认 process.env.NODE_ENV

build 文件夹下,build.js 中,默认 process.env.NODE_ENV 是 production,先注释它

'use strict'
require('./check-versions')()
 
// process.env.NODE_ENV = 'production'    // 注释掉这一段
 
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

5. 设置不同的 process.env.NODE_ENV

由于上一步清除了默认的 process.env.NODE_ENV,要在其他地方加回来

5.1 build文件夹下,新建 buildProd.js

代码如下

'use strict'
process.env.NODE_ENV = 'production'
require('./build.js')

5.2 如果有其他环境,比如上面说的培训环境,新建 buildTrain.js (名字自定义)

代码如下

'use strict'
process.env.NODE_ENV = 'train'    // 值要和 webpack.prod.conf.js 中判断的地方对应上
require('./build.js')

6. 配置 script 脚本

package.json 中,配置 script 脚本。

通常我们打包时,执行 npm run build,经过以上修改后,我们就要用不同的命令,来打包不同环境

/** 
  * 本代码中的注释只是为了说明,json中是不允许写这些注释的
  */
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
//  "build": "node build/build.js",        // 这是原来默认的,写在这里做参照
    "build": "node build/buildProd.js",    // 生产环境,改为 buildProd.js
    "train": "node build/buildTrain.js"    // 培训环境,改为 buildTrain.js
},

到这里,所有的修改都完成了,在发布不同环境时,这样执行:

生产环境:npm run build;培训环境:npm run train。其他环境举一反三。

把不同环境的命令交给集成工程师,让他们写到 Jenkins 脚本中就可以了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下
    2024-04-04
  • Vue.js状态管理之Pinia与Vuex详解

    Vue.js状态管理之Pinia与Vuex详解

    Pinia和Vuex一样都是是vue的全局状态管理器,其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia,下面这篇文章主要给大家介绍了关于Vue.js状态管理之Pinia与Vuex的相关资料,需要的朋友可以参考下
    2023-02-02
  • 详细聊聊vue中组件的props属性

    详细聊聊vue中组件的props属性

    父子组件之间的通信就是props down,events up,父组件通过属性props向下传递数据给子组件,子组件通过事件events 给父组件发送消息,这篇文章主要给大家介绍了关于vue中组件的props属性的相关资料,需要的朋友可以参考下
    2021-11-11
  • 详解Vue中如何避免滥用watch

    详解Vue中如何避免滥用watch

    这篇文章主要为大家详细介绍了Vue中滥用watch带来的问题以及如何解决,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue如何动态获取当前时间

    vue如何动态获取当前时间

    这篇文章主要介绍了vue如何动态获取当前时间问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 解决vue无法侦听数组及对象属性的变化问题

    解决vue无法侦听数组及对象属性的变化问题

    这篇文章主要介绍了解决vue无法侦听数组及对象属性的变化问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue路径上如何设置指定的前缀

    vue路径上如何设置指定的前缀

    这篇文章主要介绍了vue路径上如何设置指定的前缀,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中如何把hash模式改为history模式

    Vue中如何把hash模式改为history模式

    这篇文章主要介绍了Vue中如何把hash模式改为history模式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 应用provide与inject刷新Vue页面方法

    应用provide与inject刷新Vue页面方法

    这篇文章主要介绍了应用provide与inject刷新Vue页面的两种方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,多多进步,祝大家早日升职加薪
    2021-09-09
  • vue动态路由刷新失效以及404页面处理办法

    vue动态路由刷新失效以及404页面处理办法

    作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,下面这篇文章主要给大家介绍了关于vue动态路由刷新失效以及404页面处理办法的相关资料,需要的朋友可以参考下
    2023-11-11

最新评论