vue/cli 3.0 與 2.0腳手架怎樣mock數據

3.0 移除了 static 文件目次，新增了 public 目次，這個目次下的靜態資本不會經由 webpack 的處置懲罰，會被直接拷貝，所以我們能夠直接接見到該目次下的資本。

3.0 移除了 config、build 等設置目次，假如須要舉行相干設置我們須要在根目次下建立 vue.config.js 舉行設置即可。

2.0 的文件構造

3.0 的文件構造

能夠看到 3.0 版本的腳手架在項目構造上精簡了許多，看上去沒有那末的煩瑣。接下來我就舉行 mock 數據的設置，再說 3.0 之前，我們先看看 2.0 的時刻我們都是怎樣運用靜態數據文件舉行 mock 的。

2.0 設置

起首，在這個版本是只要我們的 static 目次下的文件是能夠被接見到的，所以我們就把靜態文件放入該目次下。

// 靜態數據寄存的位置 static/mock/home.json

我們啟動項目以后平常項目會啟動在 8080 端口，假如不是修改下對應端口號即可，我們接見下面地點：

http://localhost:8080/static/mock/index.json

我們能夠看到我們的數據是能夠要求到的，以后我們只須要在項目中 config/index.js 增加以下屬性：

dev: {// Paths fiddler charlesassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://localhost:8080',pathRewrite: {'^/api': '/static/mock'}}} }

以后我們在項目中運用即可，我們就可以獵取我們須要的數據。

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

3.0 設置

由于 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 与 2.0脚手架怎样mock数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。