只需3句让Vue3 打包部署后通过修改配置文件修改全局变量——实时生效

1、需求说明

在生产实践中，经常会遇到需要对系统的功能或表现样式做一些更改，vue2中挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法

在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用，

我这里提供一种简单的实现方法：

在main.js中通过axios获取json数据后挂载到App（此App非彼app）中，这样在组件和setup中只要导入了App就可以通过App.xxx来访问，类似Vue2中可以通过 this 来方便的访问。这里以yudao-ui-go-view数据大屏为例

2、实现方法

1）新建json配置文件

在yudao-ui-go-view\public\下新建setting.json，内容只要是json格式就行，例如：

java 复制代码

{
    "oauth2Server": "https://192.168.1.222:80/uhr",
    "callbackUrl": "http://192.168.1.222:3000/big/callback",
    "clientId": "yudao-sso-demo-by-code"
}

2）修改 vue 实例化过程

在src\main.js的中先导入App.vue

java 复制代码

import App from '@/App.vue'

然后找到 function appInit() 将 app的初始化过程修改为如下：

这里的修改在const app = createApp(App) 后面，只有3句

这里的修改在const app = createApp(App) 后面，只有3句

这里的修改在const app = createApp(App) 后面，只有3句

java 复制代码

async function appInit() {

  const goAppProvider = createApp(GoAppProvider)

  const app = createApp(App)

  var conf = await axios.get(import.meta.env.VITE_PUBLISH_PATH + "big_setting.json");
  App.setting = conf.data;
  app.config.globalProperties.$setting = conf.data

  // 注册全局常用的 naive-ui 组件
  setupNaive(app)

  // 注册全局自定义指令
  setupDirectives(app)

  // 注册全局自定义组件
  setupCustomComponents(app)

  // 挂载状态管理
  setupStore(app)

  // 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
  goAppProvider.mount('#appProvider', true)

  // 挂载路由
  setupRouter(app)

  // 路由准备就绪后挂载APP实例
  await router.isReady()

  // Store 准备就绪后处理主题色
  setHtmlTheme()

  // 语言注册
  app.use(i18n)

  // 挂载到页面
  app.mount('#app', true)

  // 挂载到 window
  window['$vue'] = app
}

这 import.meta.env.VITE_PUBLISH_PATH来自于 .env.xxx配置文件，表示应用发布路径，经常是二级发布目录，如数据大屏： /big/，这样要注意一下最后有个反斜杠 /

3）在setup或组件中使用

先导入App

import App from '@/App.vue'

然后通过App.setting.xxxx来访问配置属性，非常方便。

java 复制代码

// * SSO登录
export const ssoLogin = () => {
  var setting = App.setting || {};
  var oauth2_server = setting.oauth2Server || "https://127.0.0.1:80/uhr";
  var callback_url = setting.callbackUrl || (location.href.substring(0,location.href.indexOf(import.meta.env.BASE_URL) + import.meta.env.BASE_URL.length) + "callback"); // 必须与数据库里面的一样
  var clientId = setting.clientId;
   // 可以改写成，你的 clientId
  var redirectUri = encodeURIComponent(callback_url); // 注意，需要使用 encodeURIComponent 编码地址
  var responseType = 'code'; // 1）授权码模式，对应 code；2）简化模式，对应 token
  window.location.href = oauth2_server +'/sso?client_id=' + clientId
    + '&redirect_uri=' + redirectUri
    + '&response_type=' + responseType;
}

============= 相关博文 ============

vite build 发布到nginx二级目录

ruoyi-vue-pro数据大屏------路由支持history，告别难看的hash路由

Vue2 打包部署后通过修改配置文件修改全局变量------实时生效

只需3句让Vue3 打包部署后通过修改配置文件修改全局变量------实时生效

Vue页面加载起飞------vue & nginx 开启gzip和静态页面缓存

钉钉扫码登录ruoyi-vue-pro------超详细

============= 相关博文 ============