如何在Vite+Vue3中将public目录JS文件作为text/javascript加入生产构建？

方法一：直接在HTML中引入全局脚本（最简单可靠） #

public目录下的文件会被Vite原封不动复制到生产构建的dist根目录，直接通过HTML引入脚本并挂载全局对象即可满足需求：

1. 修改public/test.js，移除export default，直接将对象挂载到window：

window.TEST_CONFIG = {
    REDIRECT_URL: "https://example.com/",
    API_URL: "https://example.com/",
};

2. 在项目根目录的index.html中添加脚本引入（自动以text/javascript类型加载）：

<script src="/test.js"></script>

3. 项目代码中直接访问全局对象：

console.log('TEST_CONFIG', window.TEST_CONFIG);

此方式在开发、生产环境均能稳定工作，完全符合你的需求。

方法二：通过Vite配置注入全局变量（适合动态处理场景） #

如果需要在构建阶段动态处理该JSON对象，不要直接import public目录的文件，改用文件读取的方式获取内容后注入：

1. 修改vite.config.ts，引入fs模块读取并解析文件内容：

import { fileURLToPath, URL } from "url";
import path from 'path';
import fs from 'fs';
import { defineConfig , loadEnv} from "vite";
import vue from "@vitejs/plugin-vue";

// 读取public/test.js并解析为对象
const testConfig = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, 'public/test.js'), 'utf-8')
    .replace('export default ', '')
);

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.VITE_REDIRECT_URL),
      __TEST__: JSON.stringify(testConfig), // 转为JSON字符串注入
    },
    plugins: [vue()],
    server: {
      hmr: {
        overlay: false,
      },
    },
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
  }
});

2. 代码中访问__TEST__时需解析字符串：

const testConfig = JSON.parse(__TEST__);
console.log('__TEST__', testConfig);

原配置失效原因 #

开发环境中Vite的dev server会处理模块import，但生产构建时public目录的文件仅被原封不动复制，不会被打包为模块；同时define中直接传入模块导出的对象，会被Rollup的优化逻辑处理，导致生产环境无法正常注入全局变量。

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