如何配置vite.config.js使得json文件不被打包成js模块

从vite官方文档了解到

resolve.extensions​

• 类型：  string[]
• 默认：  ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。

vite默认将json文件打包成js模块

assetsInclude​

• 类型：  string | RegExp | (string | RegExp)[]
• 相关内容：  静态资源处理

指定额外的 picomatch 模式 作为静态资源处理，因此：

• 当从 HTML 引用它们或直接通过 fetch 或 XHR 请求它们时，它们将被插件转换管道排除在外。
• 从 JavaScript 导入它们将返回解析后的 URL 字符串（如果你设置了 enforce: 'pre' 插件来处理不同的资产类型，这可能会被覆盖）。

内建支持的资源类型列表可以在 这里 找到。

示例：

js
 代码解读
复制代码
export default defineConfig({
  assetsInclude: ['**/*.gltf'],
})

默认支持的文件类型，不包含json文件。由于以上原因，所以修改

• build.rollupOptions.assetsFileNames
• build.rollupOptions.chunkFileNames

都不起作用。

经查资料得到一个解决方案，使用fetch的方式获取json资源，而不能使用import。

❌ 错误的方式

js
 代码解读
复制代码
import somejson from '@/assets/some.json'

const data = ref(null)

onMounted(() => {
    data.value = somejson;
})

✅正确的方式

js
 代码解读
复制代码
const data = ref(null)

onMounted(async() => {
    const response = await fetch("src/path/to/file.json"); 
    const file = await response.json(); 
    console.log("cool file", file);
})

fetch确实不会构建到一起，因为从本地资源变成了在线资源...

按照以上方式pnpm run dev可以正常运行，但是预览模式或线上会报资源文件404。 原因是fetch的url是相对路径，线上环境找不到资源。

解决办法

new URL()生成静态资源在线url。将以上代码改为

js
 代码解读
复制代码
import somejson from '/assets/some.json'

const data = ref(null)

const getJson = async () => {
    const url = new URL('/assets/some.json', import.meta.url).href;
    const response = await fetch(url).then(res => res.json())
    data.value = response;
}

注：需要将json位置放在 /public 目录下。src目录下执行import会被构建成js模块。

最终方案

1. 将json文件放在项目public目录下.

2. 使用new URL('/assets/some.json', import.meta.url).href 生成在线url.

注意： new URL(param1, param2) 第一个参数不能使用模版字符串，否则会被编译。只能使用字符串

3. 使用fetch(url)的方式获取json.

浏览器验证

完结撒花!!!