Vue3中如何正确读取全局配置文件并在项目中使用

我的尝试 #

在main.js中导入public目录下的配置文件，并挂载到全局属性：

// src/main.js
// Configuration
import * as config from '/config/settings.js'
app.config.globalProperties.apiUrl = config.apiUrl
app.config.globalProperties.imageBaseUrl = config.imageBaseUrl

public/config/settings.js中的配置内容：

const apiUrl = 'https://example.com/'
const imageBaseUrl = 'https://example.com/assets/images/equipment/'

export { apiUrl, imageBaseUrl }

组件中通过this访问全局配置：

const url = this.apiUrl + 'Reservation';

遇到的问题 #

执行npm run dev时报错，提示需将导入语句改为：

import * as config from '/config/settings.js?url'

但添加?url后，生产环境运行出现以下错误：

src/main.js (30:44): "apiUrl" is not exported by "../../../../../config/settings.js?url", imported by "src/main.js".
src/main.js (31:50): "imageBaseUrl" is not exported by "../../../../../config/settings.js?url", imported by "src/main.js".

正确解决方案 #

方式1：将配置文件放在src目录下（推荐） #

public目录下的文件不会被打包工具（如Vite）解析为ES模块，因此将配置文件移至src/config/settings.js，即可正常导入：

// src/main.js
import * as config from './config/settings.js'
app.config.globalProperties.apiUrl = config.apiUrl
app.config.globalProperties.imageBaseUrl = config.imageBaseUrl

这种方式下，配置文件会被打包工具处理，支持ES模块导出，开发和生产环境均可正常运行。

方式2：保留配置在public目录（无需打包） #

若需要打包后可直接修改配置文件，无需重新构建，可采用以下两种方法：

方法A：通过全局变量暴露配置

修改public/config/settings.js，将配置挂载到window对象：

// public/config/settings.js
window.appConfig = {
  apiUrl: 'https://example.com/',
  imageBaseUrl: 'https://example.com/assets/images/equipment/'
}

在public/index.html中提前引入该配置文件：

<script src="/config/settings.js"></script>

然后在main.js中读取全局变量：

// src/main.js
app.config.globalProperties.apiUrl = window.appConfig.apiUrl
app.config.globalProperties.imageBaseUrl = window.appConfig.imageBaseUrl

方法B：异步读取JSON配置文件

将public/config/settings.js改为JSON格式的settings.json：

{
  "apiUrl": "https://example.com/",
  "imageBaseUrl": "https://example.com/assets/images/equipment/"
}

在main.js中通过fetch异步加载配置，再挂载应用：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

async function initApp() {
  const response = await fetch('/config/settings.json')
  const config = await response.json()
  
  const app = createApp(App)
  app.config.globalProperties.apiUrl = config.apiUrl
  app.config.globalProperties.imageBaseUrl = config.imageBaseUrl
  
  app.mount('#app')
}

initApp()

补充：Vue3组合式API推荐方案 #

Vue3更推荐使用provide/inject替代app.config.globalProperties，尤其在组合式API中更易用：

// src/main.js
import { createApp } from 'vue'
import * as config from './config/settings.js'
import App from './App.vue'

const app = createApp(App)
app.provide('appConfig', config) // 全局提供配置
app.mount('#app')

在组件中通过inject获取配置：

<script setup>
import { inject } from 'vue'
const appConfig = inject('appConfig')
const url = appConfig.apiUrl + 'Reservation'
</script>

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