First, create a new static directory in your project and copy the JSON file to it, as shown in the following figure:

In resolve of vue.config.js, define the path for storing the JSON file, as shown in the figure below:

Import json in pages that need it and use:

Method one:

I have checked a lot of information on the Internet, and most of them are introduced as follows:

Install vue-resource. NPM install vue-resource

In the main.js file add:

import VueResource from 'vue-resource'

Vue.use(VueResource)
Copy the code

Introduce:

Mounted () {this. $HTTP. Get (' * * *. / static/json). Then (res = > {the console. The log (' the json data is: '+ res. Body) / / The RES object here contains json file information and data. The JSON data we need exists in the body property})}Copy the code

When I use method 1, I don’t know why I can’t get json file, and report 404 error

After some research, I used the following methods to achieve:

Method 2:

Import directly to the page you want to use:

// Import jsonData from '/static/***. Json '/ / define a variable to receive data data() {return {commonJson: // Mounted () {this.monjson = jsonData console.log(this.monjson)},Copy the code

Successfully obtaining data