學(xué)習(xí)各種資料闽烙，整理出一份可用的mock方式（如有問(wèn)題還請(qǐng)各位大神多多指教）
>使用到的技術(shù)：
?????? vue-cli翅睛、webpack、node黑竞、npm捕发、json-server
完整步驟:
（基礎(chǔ)版）
? 1、全局安裝json-server
?????? npm i json-server -g
?
2摊溶、安裝好之后爬骤，修改配置文件，config-->index.js-->proxyTable
????? proxyTable: {
? ? ? ? ? '/api/': {
? ? ? ? ?? target: 'http://localhost:3000',
? ? ? ? ?? changeOrigin: true,
? ? ? ? ?? secure: false,
? ? ? ? ?? pathRewrite: {
? ? ? ? ? ? ? ? ? '^/api/': ''
? ? ? ? ? ? }
? ? ? ? ? }
? ???? },
3莫换、在目錄下創(chuàng)建一個(gè)mock文件夾
????? 新建一個(gè)db.json文件
???????????? {
????????????????? "data":{
?????????????????????? "data":"world",
? ? ? ? ? ? ? ? ? ? ??? "status":0,
? ? ? ? ? ? ? ? ? ? ? ?? "msg":"success"
? ? ? ? ? ? ? ? ? ?? }
?????????????? }
4霞玄、修改package.json文件package.json-->scripts
????? "scripts": {
????????????? "dev": "node build/dev-server.js",
????????????? "start": "node build/dev-server.js",
????????????? "build": "node build/build.js",
? ? ? ? ? ?? "mock": "node mock/db.json --post 9090",
???????????? "mockdev": "npm run mock & npm run dev"
??????? },
5骤铃、啟動(dòng)項(xiàng)目，再啟動(dòng)服務(wù)
???? npm run dev
???? npm run mock
或者
??? npm run mock
6坷剧、頁(yè)面請(qǐng)求
??? this.$http.get('/api/data').then((res)=>{
? ? ? ? ? console.log(res)
? ? ? })
（進(jìn)階版）
因?yàn)轫?xiàng)目?jī)?nèi)可能不是只是需要一個(gè)json文件惰爬，可能存在這種情況，如果每個(gè)文件都去配置就很麻煩惫企，可以直接在mock文件夾里編寫(xiě)一個(gè)server.js
1撕瞧、2步驟同上，步驟3創(chuàng)建文件夾如上
4狞尔、創(chuàng)建server.js
5丛版、修改package.json文件package.json-->scripts
"scripts": {
????????????? "dev": "node build/dev-server.js",
????????????? "start": "node build/dev-server.js",
????????????? "build": "node build/build.js",
? ? ? ? ? ?? "mock": "node mock/server.js", ///該條配置不一樣
???????????? "mockdev": "npm run mock & npm run dev"
??????? },
6、啟動(dòng)項(xiàng)目并啟動(dòng)服務(wù)
