學習各種資料,整理出一份可用的mock方式(如有問題還請各位大神多多指教)
>使用到的技術:
?????? vue-cli、webpack、node、npm、json-server
完整步驟:
(基礎版)
? 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、在目錄下創建一個mock文件夾
????? 新建一個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、啟動項目,再啟動服務
???? npm run dev
???? npm run mock
或者
??? npm run mock
6、頁面請求
??? this.$http.get('/api/data').then((res)=>{
? ? ? ? ? console.log(res)
? ? ? })
(進階版)
因為項目內可能不是只是需要一個json文件,可能存在這種情況,如果每個文件都去配置就很麻煩,可以直接在mock文件夾里編寫一個server.js
1、2步驟同上,步驟3創建文件夾如上
4、創建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、啟動項目并啟動服務