使用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)
- 复制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数据
// '/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");
// 找到对应的mock下面的文件夹，并将其引入 写入res中 返回
// 相当于用express做了一个服务
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数据
在mock/one/文件夹下面
db.json
{
"data": "success",
"status": 200,
"msg": "cms"
}
5.在组件里请求数据
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/
创建一个项目，项目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",
