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

Question

我想导入一个 JSON 文件来使用它，我需要它来修改它所以我把它放在 public 文件夹而不是 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);

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

Ways to import a JSON file in public folder in Vue-CLI

vue.js

vuejs2

vue-cli

vue-cli-3