Issue
I'm migrating from Vue 2 to Vue 3. Doing test app first.
I'm having trouble importing a JSON file.
The file exists. Tried all these variants:
import { sites } from "./data/sites.json";
import sites from "./data/sites.json";
import sites from "../data/sites.json";
import sites from "@/data/sites.json";
https://www.koderhq.com/tutorial/vue/local-json/ and https://codesandbox.io/s/z2mpz6zq23?file=/src/components/HelloWorld.vue
Sandbox Link - dev - This doesn't work
Thanks @Tolbxela I tried that:
Solution
Your Codesandbox link doesn't run, so I recreated it in StackBlitz.
Your directory layout looks like this:
src
├── components
│ └── GoodTable.vue
├── data
│ └── sites.json
Notice import rows from './data/sites.json'
in src/components/GoodTable.vue
. ./data/sites.json
is a relative path, so the lookup is relative to the importing file's directory, which is src/components
. src/components/data/sites.json
does not exist, so Vite displays an error.
The JSON file is actually one parent level up in src/data/sites.json
, so you need to update the import path to:
import rows from '../data/sites.json'
Answered By - tony19
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.