在 Vue-CLI 中的公共文件夹中导入 JSON 文件的方法

Question

我想导入一个 JSON 文件来使用它，我需要它在未来修改它所以我把它放在public文件夹 not 中assets，当我这样引用它时import JSON from ../../public/Data.json它可以工作，但我不认为在构建项目后可以解决因为构建后没有public文件夹。所以我试过这个：

let addr = process.env.BASE_URL;
import JSON from `${addr}Data.json`;

但它抛出一个错误：SyntaxError 我现在很困惑哪种方式最好，还有另一种方式吗？

Answer 1

public 文件夹中的资产按原样复制到 dist 文件夹的根目录。在您的代码中，您可以像引用它一样/Data.json（如果您的应用程序部署在域的根目录）。

例如

async someMethod() {
    const baseUrl = process.env.BASE_URL;
    const data = await this.someHttpClient.get(`${ baseUrl }/Data.json`);
}

如果您想像尝试一样导入 JSON，我建议将它放在 src 文件夹中的某个位置并从那里导入

例如

import data from '@/data/someData.json'

console.log(data);