vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情
mockjs在dev和build環(huán)境的配置
cli4中環(huán)境配置
這里參考了這位的文章: vue-cli4.0多環(huán)境配置，變量與模式.寫的很詳細，大家可以移步去康康~~~
默認情況下，Vue cli有三種開發(fā)模式:development,production,test.
自定義配置環(huán)境
cli4在自定義配置環(huán)境時，需要自己添加文件，像??????這樣：
這兩個文件是我要自定義的開發(fā)環(huán)境(.env.development)和生產(chǎn)環(huán)境(.env.production)的配置文件。
.env.development:
NODE_ENV='development' // 注意自定義的變量名前面一定要加VUE_APP_ ，在項目中如果想要獲取這里的自定義變量可用process.env.比如，想在mainjs里打印下面定義的url可以用window.console.log(process.env.VUE_APP_URL) VUE_APP_URL = 'http://xxxx.xxx.xx.xxx:xxxx' // 這個是在開發(fā)環(huán)境中接口要請求的地址 VUE_APP_MOCK = true // 這個是在開發(fā)環(huán)境中加入mockjs模塊，這里設置的true或flase在下面mockjs里會寫。如果你的項目中不用mockjs可以不加這一行
.env.production:
NODE_ENV='production' VUE_APP_URL = '' VUE_APP_MOCK = false
現(xiàn)在完事具備，只差package.json配置了?。?！
package.json:
"scripts": {
"dev": "vue-cli-service serve --mode development", // dev是給開發(fā)環(huán)境自定義的名字，隨便寫，npm run 后面加這個名字。這里mode后面的 development就是上面.env.development文件中的VUE_APP_MODE的值，運行dev環(huán)境就直接 npm run dev
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
}
運行dev環(huán)境 ： npm run dev
// 理論知識見下面??，如果單純想實現(xiàn)功能，這塊可以忽略。
.env // 在所有的環(huán)境中被載入 .env.local // 在所有的環(huán)境中被載入，但會被 git 忽略 .env.[mode] // 只在指定的模式中被載入 .env.[mode].local // 只在指定的模式中被載入，但會被 git 忽略
這里我理解的是當運行程序時，執(zhí)行順序: .env(所有環(huán)境) -> .env.[mode] (特定環(huán)境)。比如，當運行開發(fā)環(huán)境時，npm run dev ，執(zhí)行順序: 先.env 后.env.development。
（我猜這個.env是package.json—scripts中每個mode中vue-cli-service 后面的 serve/build，不過我沒有證據(jù)！如果大家有知道的請教教我！?。。?/p>
mockjs在vue cli4開發(fā)環(huán)境的配置及使用
1.安裝mockjs
進入項目文件夾，執(zhí)行命令：npm install mockjs --save，將mockjs安裝到項目中。
2.創(chuàng)建mock文件夾
在src目錄下，創(chuàng)建mock文件夾，mock文件夾下創(chuàng)建index.js
index.js
一定注意！??！get請求需要把url寫成正則，否則不能攔截
import Mock from 'mockjs'; // 引入mockjs
const data = {
Message: '查詢成功',
Code: 1,
Data: {
Id: '',
name: ''
}
};
// 攔截請求延遲
// Mock.setup({
// timeout: 3000
// });
// 一定注意?。。???? get請求需要把url寫成正則，否則不能攔截
Mock.mock(
/https:\/\/www.baidu\.com\//,
'get',
data
); // 參數(shù)分別為請求要攔截的url(項目中請求地址只要 >包含< 了這個參數(shù),就會被攔截，第二個參數(shù)是請求方式，第三個參數(shù)是請求之后的response數(shù)據(jù))
export default Mock;
.env.development:
NODE_ENV='development' VUE_APP_URL = 'http://xxxx.xxx.xx.xxx:xxxx' VUE_APP_MOCK = true
VUE_APP_MOCK = true 是為了在mainjs文件判斷當前運行環(huán)境中是否要加入mockjs。
mainjs:
添加一行代碼
process.env.VUE_APP_MOCK === 'true' && require('./mock/index');
// 如果process.env.VUE_APP_MOCK === 'true' 則引入mock文件夾下的index.js中的攔截.
// 至于true為什么要加引號，大家體驗一下不加的情況就能明白了，.env.development文件中的value都自動加了引號。不信的話試試下面這行展開
// console.log(process.env.VUE_APP_MOCK, typeof process.env.VUE_APP_MOCK);
現(xiàn)在vue項目中就可以使用了：
this.axios.get('https://www.baidu.com/').then(res => {
console.log(res.data) // 這個的返回結果就是mock-> index.js文件中的data
});
vue中mockjs搭建使用說明
前后端分離的開發(fā)模式，前端需要向后端請求數(shù)據(jù)（ajax請求），但實際開發(fā)過程中，前后端會約定一份 接口文檔，但前后端開發(fā)進度并不一致，當后端沒有完善接口功能時，前端需要在本地模擬數(shù)據(jù)返回，此時需要使用到mockjs。
也就是說，在后端接口還未開發(fā)時，前端人員卻需要調用接口進行測試前端程序，前端人員就可以使用mockjs來模擬后端接口的返回數(shù)據(jù)。
使用mockjs，我們希望實現(xiàn)目的：
1、能夠模擬出表記錄對象數(shù)據(jù)
2、能夠實現(xiàn)模擬出增刪改查接口操作
3、能夠配置只對手動配置的接口實現(xiàn)攔截
4、只在開發(fā)環(huán)境下mockjs可以攔截
安裝
npm install mockjs --save-dev
項目搭建
src 新增目錄結構
mock
- index.js 用于加載mock對api攔截的配置
- mock-data.js 用于定義mock模擬數(shù)據(jù)對象方法
- api
- userApi.js mock模擬api接口方法定義文件
注意：mockjs一般只用于開發(fā)環(huán)境下單元測試用
mock/index.js 配置mock對api攔截的文件
代碼：
// 引入mockjs
import Mock from 'mockjs'
// 引入api對應的mock模擬接口方法文件
import userApi from './api/userApi.js'
//import customerApi from './api/customerApi.js'
// 設置200-1000毫秒延時請求數(shù)據(jù)
Mock.setup({
timeout: '200-1000'
})
/********* 配置要攔截的 api (使用正則路徑匹配) 和 api對應的mock模擬接口方法 ********/
// 用戶
Mock.mock(/\/api\/user\/list/, 'get', userApi.getUserList)
Mock.mock(/\/user\/info/, 'get', userApi.getUser)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/del/, 'post', userApi.deleteUser)
mock/mock-data.js 定義mock數(shù)據(jù)對象模擬方法
代碼示例：
import Mock from 'mockjs'
const Random = Mock.Random
export default {
// 緩存mock data
store: {},
// 獲取表 mock data
getTable: function(tableName){
if(this.store[tableName]){
return this.store[tableName]
}else{
let func = this[tableName];
this.store[tableName] = func();
return this.store[tableName]
}
},
// 用戶表
ifs_ua_account: function(){
let List = []
const count = 200
for (let i = 0; i < count; i++) {
List.push(
Mock.mock({
uid: i + 1,
user_name: Random.name(), // 隨機的英文姓名
real_name: Random.cname(), // 隨機的中文姓名
"sex|1": ["男", "女"], // 隨機取數(shù)組中一個元素
birthday: Random.date(), // 隨機日期
mobile: /^1[3456789]\d{9}$/, // 手機號碼
post: Random.pick(["設計", "開發(fā)", "測試", "實施"], 1, 3), // 從數(shù)組中隨機取1-3個元素重新組成數(shù)組
address: '@county(true)', // 地址
email: "@email", // Email
weight: Random.float(40, 90, 1, 1), // Random.float(整數(shù)位最小值, 整數(shù)位最大值, 小數(shù)位最小位數(shù), 小數(shù)位最大位數(shù)) 實型
age: Random.integer(20, 55), // 隨機取20 - 55之間的整數(shù)
e_memo: "@paragraph(1,2)", // 英文文本(句子)
memo: "@cparagraph(1,2)", // 中文文本(句子)一個參數(shù)時，參1：句子的個數(shù)；兩個參數(shù)時，參1：句子的最小個數(shù) 參2：句子的最大個數(shù)
"status|1": [0, 1, 2], // 隨機取數(shù)組中一個元素
header: Random.image('200x100', '#50B347', '#FFF', 'Mock.js'), // 根據(jù)字符串text生成一張圖片 Random.image( size, background, foreground, text )
})
)
}
return List;
},
// 角色表
ifs_ua_account_group: function(){
let List = []
const count = 8
const name = ["管理員", "項目經(jīng)理", "測試經(jīng)理", "開發(fā)經(jīng)理"];
for (let i = 0; i < name.length; i++) {
List.push(
Mock.mock({
id: i + 1,
role_name: name[i],
role_memo: "@cparagraph(1,2)",
role_code: /UG-\d{2}-\d{2}-\d{2}/ // "UG-NN-NN-NN"格式
})
)
}
return List;
}
}
mock/api/xxxxApi.js mock模擬api接口方法定義
示例代碼：
import Mock from 'mockjs'
import mockdb from "@/mock/mock-data.js"
// get請求從config.url獲取參數(shù)，post從config.body中獲取參數(shù)
function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
)
}
const Random = Mock.Random
// 隨機生成的用戶列表數(shù)據(jù)
let List = mockdb.getTable("ifs_ua_account")
export default {
/**
* 獲取列表
* 要帶參數(shù)
* @param
* @return {{code: number, message: string, data: *[]}}
*/
getUserList: config => {
const {
name,
page = 1,
limit = 20
} = param2Obj(config.url)
return {
code: 200,
message: '',
data: List
}
},
/**
* 增加用戶
* @param name, addr, age, birth, sex
* @return {{code: number, data: {message: string}}}
*/
createUser: config => {
const {
name,
addr,
age,
birth,
sex
} = JSON.parse(config.body)
console.log(JSON.parse(config.body))
List.unshift({
id: Mock.Random.guid(),
name: name,
addr: addr,
age: age,
birth: birth,
sex: sex
})
return {
code: 20000,
data: {
message: '添加成功'
}
}
},
/**
* 刪除用戶
* @param id
* @return {*}
*/
deleteUser: config => {
const {
id
} = param2Obj(config.url)
if (!id) {
return {
code: -999,
message: '參數(shù)不正確'
}
} else {
List = List.filter(u => u.id !== id)
return {
code: 200,
message: '刪除成功'
}
}
}
}
項目配置
mockjs 在 dev環(huán)境下攔截請求
.env.development 開發(fā)環(huán)境變量配置文件中，增加變量
VUE_APP_MOCK = 1
main.js 文件中增加下面代碼
// mock配置，實現(xiàn)只在dev環(huán)境下載入mockjs
process.env.VUE_APP_MOCK && require('@/mock/index.js')?項目測試
前面的項目中搭建及配置都完成了，現(xiàn)在就可以調用axios訪問api進行測試了
我們先在src/api/ 目錄下新建一個userApi.js 文件，定義向后端請求的方法；
src/api/userApi.js 代碼：
import https from '@/https.js'
const userApi = {
baseUrl: '/api',
getUserList: function(params){
return https.fetchGet(this.baseUrl + "/user/list", {});
},
};
export default userApi
然后，我們在App.vue中，引入 src/api/userApi.js ，調用 getUserList() 方法，控制臺打印出 返回的數(shù)據(jù)，測試完成。
userApi.getUserList().then((response)=>{
? ? console.log(response.data)
})開發(fā)流程
首先，我們知道m(xù)ock是用來模擬接口返回的，那么我們就先要將接口入?yún)⒓胺祷卮_認定義好；
并且，我們要在src/api/目錄下的api方法要定義好；
這是兩個前提條件。
然后，才是前端測試，發(fā)現(xiàn)后端接口還沒開發(fā)，就自己做mock測試；
所以流程應該是這樣：
- 接口入?yún)⒓胺祷囟x
- 完成前端功能開發(fā)
- mock/mock-data.js 添加接口返回數(shù)據(jù)模型 （這一步是可選的，目前還不確定是否要將數(shù)據(jù)模型定義單獨放到這里，還是直接放到 xxxApi.js里定義，要在實際項目應用中，看情況再確認）
- mock/api/xxxApi.js 添加api接口mock方法
- mock/index.js 添加api路由攔截配置
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結合完整實例形式分析了vue.js創(chuàng)建及使用自定義指令的相關操作技巧與注意事項,需要的朋友可以參考下2018-12-12
vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
vue使用動態(tài)組件手寫Router View實現(xiàn)示例
這篇文章主要為大家介紹了vue使用動態(tài)組件手寫RouterView實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
組件化是為了方便代碼復用，提高開發(fā)效率。今天腳本之家小編給大家分享常見的vue組件寫法四種，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue觸發(fā)input選取文件點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3中使用vuex和vue-router的步驟，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了vue導出少量pdf文件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Uniapp 實現(xiàn)頂部標簽頁切換功能(詳細步驟)
本文介紹了如何在UniApp中實現(xiàn)頂部標簽頁切換功能,u-tab-bar組件提供了便捷的標簽切換功能和豐富的樣式選項,而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實現(xiàn)頂部標簽頁切換,感興趣的朋友一起看看吧2025-02-02