vue/cli 3.0 與 2.0腳手架怎樣mock數(shù)據(jù)

3.0 移除了 static 文件目次，新增了 public 目次，這個(gè)目次下的靜態(tài)資本不會(huì)經(jīng)由 webpack 的處置懲罰，會(huì)被直接拷貝，所以我們能夠直接接見(jiàn)到該目次下的資本。

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

2.0 的文件構(gòu)造

3.0 的文件構(gòu)造

能夠看到 3.0 版本的腳手架在項(xiàng)目構(gòu)造上精簡(jiǎn)了許多，看上去沒(méi)有那末的煩瑣。接下來(lái)我就舉行 mock 數(shù)據(jù)的設(shè)置，再說(shuō) 3.0 之前，我們先看看 2.0 的時(shí)刻我們都是怎樣運(yùn)用靜態(tài)數(shù)據(jù)文件舉行 mock 的。

2.0 設(shè)置

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

// 靜態(tài)數(shù)據(jù)寄存的位置 static/mock/home.json

我們啟動(dòng)項(xiàng)目以后平常項(xiàng)目會(huì)啟動(dòng)在 8080 端口，假如不是修改下對(duì)應(yīng)端口號(hào)即可，我們接見(jiàn)下面地點(diǎn)：

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

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

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

以后我們?cè)陧?xiàng)目中運(yùn)用即可，我們就可以獵取我們須要的數(shù)據(jù)。

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

3.0 設(shè)置

由于 static 目次移除，我們把靜態(tài)文件放入 public 文件下。

// 靜態(tài)數(shù)據(jù)寄存的位置 public/mock/home.json

和上面一樣，啟動(dòng)項(xiàng)目后我們看看數(shù)據(jù)能不能正常被接見(jiàn)。

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

以后，差別的處所在于，我們須要手動(dòng)建立一個(gè) vue.config.js 文件放在根目次下。

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

設(shè)置完成以后，我們也是和上述一樣，在項(xiàng)目中直接接見(jiàn)數(shù)據(jù)即可。

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

總結(jié)

以上是生活随笔為你收集整理的vue/cli 3.0 与 2.0脚手架怎样mock数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。