Vue-cli 3 cannot access local mock test data
problem description
vue-cli 3 cannot access local mock data. In the local vue project, create a new mock folder to store the test data and want to access it through axios. The vue.config.js file is configured, but a 404 error is reported when accessing the vue file.
the environmental background of the problems and what methods you have tried
vue-cli3 project. The directory structure is as follows:
mockstatic
json"/goods" 404:
[HMR] Waiting for update signal from WDS.
xhr.js?ec6c:178 GET http://localhost:8080/goods 404 (Not Found)
Error: Request failed with status code 404
at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
landlord, first of all, you must understand how the static file is mapped after webpack-dev-server is enabled. In fact, it can be accessed anywhere. Furthermore, the package generated by vue-cli3 has no static folder, but has public . For example, your mock folder is placed in the public directory, and baseUrl:'. /'. Remove the related before method in devServer . Then you can visit it like this:
getGoodsList() {
axios.get("public/mock/goods.json").then(result => {
var res = result.data;
console.log(result);
this.goodsList = res.result;
}).catch(error=>{
console.log(error);
});
}
< hr >
updated at 9:50 on 2018-11-29
the project project created by vue-cli3 is as follows:
vue.config.js :
src/views/Home.vue
:
404 obviously did not intercept http://localhost:8080/goods
const Mock = require('mockjs')
const baseURL = process.env.API_ROOT;
const Random = Mock.Random;
Mock.mock(`${baseURL}apples/pick`, 'get' , (req, res) => {
return {
code:200,
message:'success',
data: ['a','b']
}
})
Mock.mock('http://localhost:8080/goods', 'get' , (req, res) => {
return {
code:200,
message:'success',
data: ['a','b']
}
})
mock files can be put anywhere. Just remember require in main.js
require ('. / mock.js')
