Allow json file in production vuejs 3

JSON file is loaded and now I have to access the objects

file.json:
    {
    "text": "Some text."
    }
    <script>
          import json from './json/data.json'
          export default{
              data(){
                  return{
                      myJson: json
                  }
              }
          }
    </script>
    ```
The problem is going to make npm run build I don't find the file. json in my dist folder to change values.
anyone know how solve this problem tnx

When you do import of json file in vue code they are imported as module, that’s get embed within the compiled code on build. To use json as external file you need to put json files under public folder and use fetch or axios to load the file on mounted() or any events to get the data.
like…

   fetch('json/data.json')
     .then(response => response.json())
     .then(json => this.myJson= json);
1 Like

Jayesh, Your answer was perfect and to the point.

running in development mode(https://localhost:8080). After building the project, I get CORS error.

Note: I open index.html from “file:///Users/…” path. Because I have to open it like this, I wish I could set up server but I can’t for this project.

Currently all browsers restrict access to loading of local file(like .js, .json etc) if you directly opening the build application directly on browser without localhost server, it will give you CORS error.
I have one link Loading Local Files in Firefox and Chrome - DEV Community 👩‍💻👨‍💻 where you can tweak browser to open the local file. I think it doesn’t seems to work anymore.