資訊專欄INFORMATION COLUMN
摘要：的文件結(jié)構(gòu)的文件結(jié)構(gòu)可以看到版本的腳手架在項目結(jié)構(gòu)上精簡了很多，看上去沒有那么的繁瑣。配置完成之后，我們也是和上述一樣，在項目中直接訪問數(shù)據(jù)即可。
前后端分離的開發(fā)模式已經(jīng)是目前前端的主流模式，至于為什么會前后端分離的開發(fā)我們就不做過多的闡述，既然是前后端分離的模式開發(fā)肯定是離不開前端的數(shù)據(jù)模擬階段。
我們在開發(fā)的過程中，由于后臺接口的沒有完成或者沒有穩(wěn)定之前我們都是采用模擬數(shù)據(jù)的方式去進(jìn)行開發(fā)項目，這樣會使我們的前后端會同時的進(jìn)行，提高我們的開發(fā)效率。
因?yàn)樽罱约涸谧詫W(xué) Vue 也在自己擼一個項目，肯定會遇到使用數(shù)據(jù)的情況，所以就想著如何在前端做一些 mock 數(shù)據(jù)的處理，因?yàn)樽约旱捻椖渴褂玫氖?vue/cli 3.0 與 vue/cli 2.0 的使用有一些的不同，所以在這里記錄一下。
注意：本文主要說的是如何配置本地靜態(tài)文件的 mock 數(shù)據(jù)的方式
首先我們來說一說vue/cli 3.0 與 2.0 的一些不同：
3.0 移除了 static 文件目錄，新增了 public 目錄，這個目錄下的靜態(tài)資源不會經(jīng)過 webpack 的處理，會被直接拷貝，所以我們能夠直接訪問到該目錄下的資源。
3.0 移除了 config、build 等配置目錄，如果需要進(jìn)行相關(guān)配置我們需要在根目錄下創(chuàng)建 vue.config.js 進(jìn)行配置即可。
2.0 的文件結(jié)構(gòu)
3.0 的文件結(jié)構(gòu)
可以看到 3.0 版本的腳手架在項目結(jié)構(gòu)上精簡了很多，看上去沒有那么的繁瑣。接下來我就進(jìn)行 mock 數(shù)據(jù)的配置，再說 3.0 之前，我們先看看 2.0 的時候我們都是怎么使用靜態(tài)數(shù)據(jù)文件進(jìn)行 mock 的。
2.0 配置首先，在這個版本是只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態(tài)文件放入該目錄下。
// 靜態(tài)數(shù)據(jù)存放的位置 static/mock/home.json
我們啟動項目之后一般項目會啟動在 8080 端口，如果不是修改下對應(yīng)端口號即可，我們訪問下面地址：
http://localhost:8080/static/mock/index.json
我們可以看到我們的數(shù)據(jù)是可以請求到的，之后我們只需要在項目中 config/index.js 添加如下屬性：
dev: {
// Paths fiddler charles
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/api": {
target: "http://localhost:8080",
pathRewrite: {
"^/api": "/static/mock"
}
}
}
}
之后我們在項目中使用即可，我們就能獲取我們需要的數(shù)據(jù)。
axios
.get("/api/index.json")
.then(this.handler)
3.0 配置
因?yàn)?static 目錄移除，我們把靜態(tài)文件放入 public 文件下。
// 靜態(tài)數(shù)據(jù)存放的位置 public/mock/home.json
和上面一樣，啟動項目后我們看看數(shù)據(jù)能不能正常被訪問。
http://localhost:8080/mock/home.json
之后，不同的地方在于，我們需要手動創(chuàng)建一個 vue.config.js 文件放在根目錄下。
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
pathRewrite: {
"^/api": "/mock"
}
}
}
}
}
配置完成之后，我們也是和上述一樣，在項目中直接訪問數(shù)據(jù)即可。
axios
.get("/api/home.json")
.then(this.handler)
總結(jié)
以上我們就學(xué)會了如何在 vue/cli 3.0 的項目中進(jìn)行 mock 數(shù)據(jù)
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)發(fā)，點(diǎn)贊
本文作者是個小白，如有不足，歡迎留言指正。
關(guān)注微信公眾號：六小登登。領(lǐng)取全套學(xué)習(xí)資源
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108802.html
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看 這個分支版本是一兩年前...
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。 一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看這個分支版本是一兩...
摘要：項目結(jié)構(gòu)公共資源公共資源全局樣式公共組件布局模擬數(shù)據(jù)項目模塊模塊模塊頁面模塊路由插件公共路由全局狀態(tài)公共方法主視圖主程設(shè)置靜態(tài)資源配置文件開發(fā)規(guī)范語義化命名使用駝峰式命名，文件命名不宜過長，路由的命名和文件命名保持一致。 背景 由于saas平臺即將開始，現(xiàn)在重新梳理前端架構(gòu)和開發(fā)規(guī)范，項目使用模塊化思想搭建，每個模塊都有自己都路由和方法，盡量做到刪除和添加模塊，不會對框架產(chǎn)生較大對影響...
摘要：缺點(diǎn)需要增加本地的代碼量，以及需要配置實(shí)現(xiàn)攔截優(yōu)點(diǎn)數(shù)據(jù)通過會更豐富。缺點(diǎn)修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點(diǎn)可控內(nèi)容以及實(shí)現(xiàn)動態(tài)。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景 哎喲，好煩啊，這個需求還么結(jié)束就來下一個需求，程序員不要排期的嗎？ 沒辦法啊，資本主義的XX嘴臉啊 來吧，技術(shù)評審我倆把接口...
摘要：前言倉庫地址本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結(jié)歸納性質(zhì)的文章。 前言 倉庫地址：https://github.com/miaomiaozh... 本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結(jié)歸納性質(zhì)的文章。 基于vue的多頁應(yīng)用 支持自定義mock數(shù)據(jù) 支持熱加載 js打包成多個 項目結(jié)構(gòu)介紹...
閱讀 3307·2023-04-26 02:40
閱讀 4654·2021-09-22 15:22
閱讀 1600·2021-09-22 10:02
閱讀 3490·2021-08-11 10:23
閱讀 1400·2019-08-30 15:55
閱讀 2500·2019-08-30 12:48
閱讀 593·2019-08-30 11:04
閱讀 711·2019-08-29 16:29
