1、public目錄下新建mock文件夾，存放模擬數(shù)據(jù).json文件；

image.png

public下的靜態(tài)資源不經(jīng)過webpack處理，能直接訪問；

2、啟動一個服務，訪問.json數(shù)據(jù)（這里使用的是[使用python3啟動服務](http://www.itdecent.cn/p/af7aa6dc64f9

)）

啟動服務

啟動成功后，便能使用http://localhost:8080/Home.json能正確訪問到.json數(shù)據(jù)。

3、在vue.config.js配置代理

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

4、項目中使用mock數(shù)據(jù)
如.vue文件中使用Home.json:

    this.$axios
      .get("/api/Home.json")
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

//或，箭頭函數(shù)寫法
this.$axios
      //服務端接口
      .get("/api/Home.json")
      .then(response => {
          console.log(response);
        try {
        } catch (err) {
          console.log(err, 1);
        }
      })
      .catch(error => {});
  }

未完待續(xù)~

不定期整理小記~，(? ω ?)