使用webpack vue-cli生成的目錄送朱，以及我配置的目錄
配置dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: process.argv[2] === 'mock' ? '"mock"' : '"development"'
})
一、使用vue-cli自帶的express
1.將axios掛在Vue的全局組件下
net/index.js
import axios from 'axios'
// 將axios掛在原型鏈上
axios.defaults.baseURL = process.env.NODE_ENV === 'mock' ? '/mock' : '/api'
console.log('process.env.NODE_ENV', process.env.NODE_ENV)
console.log(axios.defaults.baseURL)
export default {
install(Vue) {
Vue.prototype.$http = axios
}
}
注：此處 process.env.NODE_ENV === 'mock' 表示使用easy-mock钞护，下面會講到，/api表示使用自帶的express
在main.js里面掛載axios
import axiosPlugin from '../net'
Vue.use(axiosPlugin)
- 復(fù)制dev-server.js ------> dev-server-mock.js
在里面加入
// serve pure static assets
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
//以下為添加部分
// 啟動mock數(shù)據(jù)
// '/api' => 來自于axios.defaults.baseURL= '/api'
app.all('/api/*', (req, res, next) => {
var jsonPath = req.path;
console.log(jsonPath)
// 刪除緩存
delete require.cache[require.resolve(path.join(__dirname, '../mock/' + jsonPath.replace('/api', '')))];
res.setHeader("Content-Type", "application/json;charset=utf-8");
// 找到對應(yīng)的mock下面的文件夾爆办，并將其引入 寫入res中 返回
// 相當(dāng)于用express做了一個服務(wù)
res.write(JSON.stringify(require(path.join(__dirname, '../mock/' + jsonPath.replace('/api', '')))));
res.end();
})
3.配置啟動腳本 package.json
"mock": "node build/dev-server-mock.js",
4.寫mock的json數(shù)據(jù)
在mock/one/文件夾下面
db.json
{
"data": "success",
"status": 200,
"msg": "cms"
}
5.在組件里請求數(shù)據(jù)
created () {
console.log(this.$http)
this.$http({
method: 'get',
url: '/one/db',
responseType: 'json'
}).then(function (res) {
console.log(res)
})
}
二难咕、使用easy-mock
http://easy-mock.com/
創(chuàng)建一個項目，項目url
http://easy-mock.com/mock/59fc3d6fa9ce1239805fd80e/deploy
新建一個接口地址：
2.配置proxyTable
在config/index.html
dev: {
env: require('./dev.env'),
port: process.env.PORT || 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
// '/api': {
// target: 'http',
// changeOrigin: true
// },
'/mock': {
// http://easy-mock.com/mock/59fc3d6fa9ce1239805fd80e/deploy/mock/one/db
target: 'http://easy-mock.com/mock/59fc3d6fa9ce1239805fd80e/deploy',
changeOrigin: true,
pathRewrite: {
'^/mock': '/'
}
}
},
3.配置package.json腳本
"easy-mock": "node build/dev-server.js mock",
