Vue3升级：如何模块化管理全局配置，避免main.js代码冗余

核心思路 #

在Vue3里，你可以把配置逻辑封装成接收app实例的函数，这样就能像Vue2那样把代码拆分到单独文件中，不用把所有逻辑堆在main.js里。

具体实现步骤 #

1. 重构shared.js #

把原来的配置逻辑改成函数形式，让它接收app实例作为参数：

// bootstrap/shared.js
import { reactive } from 'vue'

export default function setupShared(app) {
  const permissions = {
    me: null,
    user: null,
  }

  app.config.globalProperties.$permissions = permissions
  app.config.globalProperties.$globals = reactive({ site: {} })
}

2. 在main.js中引入并调用 #

// main.js
import { createApp, h } from 'vue'
import App from './App.vue'
import setupShared from './bootstrap/shared'

const app = createApp({
  render: () => h(App),
})

// 调用拆分出去的配置函数
setupShared(app)

app.mount('#app')

扩展方案：多配置文件的批量处理 #

如果有多个类似的配置文件（比如auth.js、utils.js），可以进一步封装批量加载逻辑，让main.js更简洁：

1. 创建bootstrap/index.js统一管理所有配置：

// bootstrap/index.js
import setupShared from './shared'
import setupAuth from './auth'
// 按需导入其他配置文件

export default function setupBootstrap(app) {
  setupShared(app)
  setupAuth(app)
  // 调用其他配置函数
}

2. 简化main.js：

// main.js
import { createApp, h } from 'vue'
import App from './App.vue'
import setupBootstrap from './bootstrap'

const app = createApp({
  render: () => h(App),
})

setupBootstrap(app)

app.mount('#app')

额外提示：Composition API 时代的更优方案 #

如果你的项目已经大量使用Composition API，推荐用Provide/Inject替代globalProperties，更贴合Vue3的设计理念：

修改shared.js的逻辑为全局Provide：

// bootstrap/shared.js
import { reactive, provide } from 'vue'

export default function setupShared(app) {
  const permissions = {
    me: null,
    user: null,
  }
  const globals = reactive({ site: {} })

  // 全局注入供组件使用
  app.provide('$permissions', permissions)
  app.provide('$globals', globals)
}

在组件中通过Inject获取：

import { inject } from 'vue'

export default {
  setup() {
    const permissions = inject('$permissions')
    const globals = inject('$globals')
    return { permissions, globals }
  }
}

内容的提问来源于stack exchange，提问作者cbloss793