vue-cli3.8配合express模拟接口数据

首页明确版本号：使用的是vue-cli(3.8x)脚手架创建的项目

---

总体思路：在webpack配置运行过程中，添加express脚本运行在本地的node.js环境中。并修改webpack的反向代理配置，解决localhost下端口号不同的跨域问题。

操作步骤

• 在目录文件下增加模拟数据data.json文件，作为模拟数据使用

• 在项目目录下创建mock.js文件，作为express的运行脚本

代码如下：

		const express = require('express')
		const app = express()
		const appData = require('./data.json')
		const seller = appData.seller
		const goods = appData.goods
		const ratings = appData.ratings
		const apiRoutes = express.Router()
		apiRoutes.get('/seller',(req,res)=> { 
		  res.json({ 
		    errno:0,
		    data:seller
		  })
		})
		apiRoutes.get('/goods',(req,res)=> { 
		  res.json({ 
		    errno:0,
		    data:goods
		  })
		})
		apiRoutes.get('/ratings',(req,res)=> { 
		  res.json({ 
		    errno:0,
		    data:ratings
		  })
		})
		app.use('/',apiRoutes)
		app.listen(8081,()=> { 
		  console.log( 'mock data is Running' )
		})

• 修改vue.config.js的wepbakc配置
  代码如下：

	// vue.config.js
	const path = require('path')
	// 用于自动化导入公共样式文件
	function addStyleResource (rule) {
	  rule.use('style-resource')
	    .loader('style-resources-loader')
	    .options({
	      patterns: [
	        path.resolve(__dirname, './src/assets/styles/imports.styl'),
	      ],
	    })
	}
	
	module.exports = {
	  chainWebpack: config => {
	    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
	    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
	  },
	  configureWebpack: config=>{
	    if (process.env.NODE_ENV === 'production') {
	      // 生产环境
	    } else {
	      // 开发环境
	      // 加载express脚本
	      require('./mock.js')
	      // 配置方向代理
	      config.devServer = { 
	        proxy: {
	          '/api': { // api表示当前项目请求的key
	            target: 'http://127.0.0.1:8081', // 代理服务器路径
	            pathRewrite: { '^/api': '/' }, // 重写路径
	            changeOrigin: true
	          }
	        }   
	      }
	      // mutate cfor development...
	    }   
	  }
	}

• 最后，大功告成，可以通过浏览器访问http://localhost:8080/api/goods就能够看见模拟数据了。