Vue 3项目中public目录JSON被意外打包进Webpack bundle求助

问题根源 #

你用import config from '/public/config.json'的方式导入文件时，import语法本身是Webpack识别模块依赖的标识，不管文件放在哪个目录，Webpack都会将其解析为模块并打包进bundle，这和public目录的资源不经过Webpack处理的规则不冲突——规则指的是文件会被原样复制到构建产物，而非禁止用模块导入的方式加载它。

正确实现方案 #

要让JSON文件仅作为静态资源存在、不被Webpack打包，需通过HTTP请求加载，而非模块导入。由于public目录的文件会被复制到构建产物的根目录，请求路径直接写/config.json即可：

方案1：原生Fetch API #

async loadConfig() {
  try {
    const res = await fetch('/config.json');
    const config = await res.json();
    // 这里处理加载后的配置
    console.log(config);
  } catch (err) {
    console.error('配置文件加载失败:', err);
  }
}

方案2：Axios（若项目已集成） #

import axios from 'axios';

async loadConfig() {
  try {
    const { data: config } = await axios.get('/config.json');
    console.log(config);
  } catch (err) {
    console.error('配置文件加载失败:', err);
  }
}

关键注意点 #

• 绝对不要用import或require加载public目录的静态资源，这类语法必然触发Webpack的模块打包流程
• 开发环境下，Vue CLI的dev server会自动映射public目录到根路径；生产构建后，JSON文件会出现在dist根目录，请求路径保持/config.json即可正常访问
• 若需在组件初始化时加载配置，可在onMounted钩子中调用上述加载方法

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