Vue3+Vite项目如何引入外部配置文件？迁移遇阻求助

核心问题分析 #

你遇到的问题本质是 Vite 与 Vue CLI 在全局变量处理、资源加载逻辑上的差异，之前依赖 externals 的思路需要适配 Vite 的运行机制。以下是分步解决方法：

1. 确保 public/config/config.js 的全局变量挂载正确 #

public 目录下的文件会直接暴露在浏览器根路径下，配置文件必须将变量挂载到 window 对象，才能在全局环境中访问：

// public/config/config.js
window.appConfig = {
  BASE_URI: 'https://your-api-domain.com'
}

2. 修正 index.html 中的配置文件引入路径 #

Vite 会将 public 目录映射到项目根路径，因此引入路径要使用绝对路径，且必须放在 Vue 及业务脚本之前，确保配置先加载：

<!-- index.html -->
<head>
  <!-- 先加载配置文件 -->
  <script src="/config/config.js"></script>
  <!-- 再加载 Vue 及其他脚本 -->
  <script type="module" src="/src/main.js"></script>
</head>

3. 方案一：直接在 Axios 配置中访问全局变量（推荐，无需额外插件） #

不需要依赖 vite-plugin-externals，直接在 axios 配置文件中读取 window.appConfig 即可：

// src/utils/axios.config.js
import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: window.appConfig.BASE_URI,
  timeout: 10000
})

export default axiosInstance

4. 方案二：使用 vite-plugin-externals 保持 import 写法（兼容旧代码） #

如果希望保留原有的 import appConfig 写法，需正确配置插件：

安装插件

npm install vite-plugin-externals --save-dev

配置 vite.config.js

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { externals } from 'vite-plugin-externals'

export default defineConfig({
  plugins: [
    vue(),
    externals({
      // 将 import 'appConfig' 映射到全局的 window.appConfig
      'appConfig': 'window.appConfig'
    })
  ]
})

Axios 配置文件写法

// src/utils/axios.config.js
import axios from 'axios'
import appConfig from 'appConfig'

const axiosInstance = axios.create({
  baseURL: appConfig.BASE_URI,
  timeout: 10000
})

export default axiosInstance

常见排查点 #

• 检查 index.html 中 script 标签的顺序，确保配置文件先于业务脚本加载
• 确认 public/config/config.js 中没有定义局部变量，必须挂载到 window
• 开发环境下不要使用相对路径引入配置文件，Vite 会自动处理 public 目录的根路径映射

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