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