使用node.js+expressmock数据 vue项目调用 ，vue项目和mock项目分离

1.搭建vue项目,使用vue/@cli搭建的项目 vue create process（项目名）

2.简单配置vue.config 由于是cli3版本 没有vue.config文件需要自己创建

const path =  require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PRODUCTION = ['production', 'prod'].includes(process.env.NODE_ENV);//判断是否是生产环境
/** 正式配置项，以下参数 都是可选**/
module.exports = {
	devServer: {
		open: true, //是否自动弹出浏览器页面
		disableHostCheck: true,
		proxy: { //配置多个跨域
			"/api": {
				target: "http://localhost:8090/api",
				changeOrigin: true,
				ws: true,//websocket支持
				secure: false,
				pathRewrite: {
					"^/api": "/"
				}
			},
		}
	}
}

3.axios进行简单封装

api文件夹是统一接口管理的地方 request是对axios进行封装

这是api中一个某一个方法,
4.vue文件中调用

import {getuserinfo} from '@/request/api.js'

methods方法中调用

methods:{
	getuserInfo(){
		let data = {id:3}
		getuserinfo(data).then(res=>{
			console.log(res)  //打印结果就是等会儿我们从node环境中取到的值
		})
	}
},

5.接下来做node环境的操作
1.安装node环境
2.安装express ***npm install express ***
3.安装mock.js npm install mockjs
4.最好还安装一个全局的nodemon，能够实时热更新 npm install nodemon -g

6.进行后端项目的搭建
在项目目录下新建index.js 定义Api路径为’api/user/list’,返回一个3个元素的JSON数组，服务器监听8090端口。

let express = require('express')
let Mock = require('mockjs')
let app = express()

let userJson  =  require('./MockJson/user.json')   //自定义的json文件
 
app.use('/api/user/list',function(req,res){
	console.log(req)
	res.json(
		userJson
	)
})

app.listen('8090',()=>{
	console.log("server 8090")
})

7.启动后端项目, 未安装nodemon的同学，这里启动项目使用node index.js启动 ，安装了nodemon的同学使用nodemon index.js启动

8.在前端项目中就可以使用当前接口啦