vue-cli@3.0多工程跳转、多环境变量配置

卢老师和马老师
353 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

今天想跟大家一起学习分享一下，Vue的全局环境变量与配置。为什么想要分享这块的知识呢？原因是我写的一个项目中，找了很多方法去解决不同前端工程、不同环境的页面跳转问题。最后还是觉得用Vue的全局环境配置去解决了这个问题比较好维护。

基本介绍

通过 vue cli 搭建的项目，有三种模式

  • 第一种是 开发环境 vue-cli-service serve --open
  • 第二种是 测试环境 vue-cli-service serve --open --mode staring
  • 第三种是 生产环境 vue-cli-service serve --open --mode prod 你可以通过传递 --mode 选项参数为命令行覆写默认的模式

image.png

命名的话注意语义化，也注意关键词，我用[production]和[test]打包就报warning了

***--mode XXX***后面拼接的XXX其实就是你在工程目录里面 .env.XXXX他会在编译的时候自动去识别对应文件里面的配置。

注意 ❗ 环境变量文件只包含环境变量的“键=值”对：

DEV=api // 这种就是错误的写法
VUE_APP_PAST=past // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用

简单配置

在 package.json 中配置

▶调试
"scripts": {
    "serve-prod": "vue-cli-service serve --open --mode prod", // 生产
    "serve-test": "vue-cli-service serve --open --mode staring", // 测试
    "serve": "vue-cli-service serve --open",// 开发
    "build-prod": "vue-cli-service build --mode prod", // 打包生产
    "build-test": "vue-cli-service build --mode staring", // 打包测试
    "build": "vue-cli-service build" // 打包开发
  },

应用场景

场景1✅

需求：现在有三个前端工程，

  • 本地端口分别是8080、8081、8082，
  • 测试环境分别是csc.kchon.cn、cscmk.kchon.cn、csckn.kchon.cn,
  • 生产环境分别是sch.kchon.cn、schmk.kchon.cn、schmk.kchon.cn。 第一个工程里面，有个按钮跳转链接到第二个工程，第二个工程里面有个按钮跳转到第三个工程。因此，我们不能在代码里面把域名+路由写死，因为到了不同环境，并不能识别。所以用到 全局环境配置 去很好处理它。

接下来我来分享我的处理办法。

🟣首先，在pubilc目录下建立三个 .json 文件，分别是开发、测试、生产对应的域名写在里面。

// 开发环境 文件命名 devConfig.json
"repositoryUrl": "http://localhost:8081",
"protalURl":"http://localhost:8082",

// 测试环境 文件命名 testConfig.json
"repositoryUrl": "http://cscmk.kchon.cn",
"protalURl":"http://csckn.kchon.cn",

// 生产环境  文件命名 prodConfig.json
"repositoryUrl": "https://schmk.kchon.cn",
"protalURl":"https://schmk.kchon.cn",

🟢其次

  • 在.env.development中

image.png

VUE_APP_CONFIG_URL = '/devConfig.json'，实际上就是指向了在pubilc中创建的josn路径

  • 在.env.staring中

image.png

VUE_APP_CONFIG_URL = '/testConfig.json'，实际上就是指向了在pubilc中创建的josn路径

  • 在.env.staring中

  • 在.env.prod中

image.png

VUE_APP_CONFIG_URL = '/prodConfig.json'，实际上就是指向了在pubilc中创建的josn路径

🟠接着

在main.js中将路径挂在到全局，方便使用。

// 获取环境变量的Url
const envVariable = process.env.VUE_APP_CONFIG_URL
axios.get(envVariable).then((res) => {
  Vue.prototype.SERVER_URL = res.data
})

🟣最后

终于到最后一步了，在.vue文件中，比如说通过点击事件让其跳转，可以这么写。 window.open(this.SERVER_URL.repositoryUrl)

  • this.SERVER_URL 实际上就是挂在vue全局的变量，
  • repositoryUrl 实际上就是在json文件中命名的键

通过打包，编译不同的环境，获取到不同环境的地址，去跳转对应环境的地址。

场景2✅

需求：在请求接口的时候，是不是遇到不同环境下，后端提供不同的地址给我们去跨域请求。那么我们也可以用 全局环境配置 去很好处理它。

  • .env.development 文件内容：
# base api
VUE_APP_STRAPI_URL = '/dev-api'
VUE_APP_STRAPI_URL = http://192.168.9.7788:1122
VUE_APP_MSG_BOT_UR = http://192.168.9.5566:1122
  • .env.staring 文件内容：
# base api
VUE_APP_STRAPI_URL = '/test-api'
VUE_APP_STRAPI_URL = http://192.168.11.4477:2233
VUE_APP_MSG_BOT_UR = http://192.168.11.6699:2233

这样就可以针对不同的环境进行打包，也不用反复修改后端地址。

vue.config.js 中

   proxy: {
      '/web-user-center': {
        target: 'process.env.VUE_APP_STRAPI_URL',
        changeOrigin: true,
        secure: false,
      },
      '/web-market': {
        target: 'process.env.VUE_APP_MSG_BOT_UR',
        changeOrigin: true,
        secure: false,
      },
    },

打包编译

我们启动项目或者打包的时候，其实就是根据你package.json来进行输入命令的。

比如我这样配置的

image.png

那么我在启动项目时：

  • npm run serve // 开发环境
  • npm run serve:staring // 测试环境
  • npm run serve:prod // 开发环境

在打包的时候：

  • npm run build // 开发环境
  • npm run build:staring // 测试环境
  • npm run build:prod // 开发环境

总结

以上就是我在做项目的时候，自己思考和参考别人的方法来总结出来的一种解决多端口地址跳转方法，我觉得维护起来不是很麻烦，暂时没有找到更好的办法，希望有大佬在评论区留言，共同探讨。

avatar
文章
阅读
粉丝