详解Vue CLI 3.0脚手架如何mock数据

因为 static 目录移除，我们把静态文件放入 public 文件下。

// 静态数据存放的位置
public/mock/home.json

和上面一样，启动项目后我们看看数据能不能正常被访问。

http://localhost:8080/mock/home.json

之后，不同的地方在于，我们需要手动创建一个 vue.config.js 文件放在根目录下。

module.exports = {
 devServer: {
  proxy: {
   '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/mock'
    }
   }
  }
 }
}

配置完成之后，我们也是和上述一样，在项目中直接访问数据即可。

axios
 .get('/api/home.json')
 .then(this.handler)

总结

以上我们就学会了如何在 vue/cli 3.0 的项目中进行 mock 数据，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。