这里说的是指配置mock环境
 
1、npm install mock
 
2、npm install cross-env
 
 
这是我的mock目录
 
在package.json 文件中配置
 
 
使用cross-env NODE_ENV 传入参数mock（至于为什么用cross-env ：是兼容win操作系统）
 
之后在config目录下的dev.env.js 文件里设置
 
 
这样就可以设置开发环境的env
 
之后可以在main.js中设置
 
 
至此，就可以使用npm run mock 来愉快的使用模拟数据开发页面了
 
另附上mock模拟数据
 
Mock.mock(`${domain}/url`, 'post', {
  status: '1',
  data: {
    idName: '张三',
    idNumber: '421022199010136015'
  }
})
 
 

https://blog.csdn.net/weixin_33815613/article/details/88027401
 https://www.webpackjs.com/plugins/define-plugin/
 https://www.webpackjs.com/guides/production/#%E6%8C%87%E5%AE%9A%E7%8E%AF%E5%A2%83
 
mock有两种，
 一种是使用后台提供的mock接口，可直接在类似yapi后台提供模拟返回数据
 一种是在本地用mock接口拦截请求，需要把返回数据都放在本地
 两种都可以修改假数据，方便测试
 
使用后台mock接口
 要点是使用DefinePlugin设置process.env.NODE_ENV 为mock，方便在代码里区分
 
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: { //webpack-dev-server设置
        contentBase: './src',
        port: 8082,
        open: true,
        inline: true,
        hot: true,
        historyApiFallback: true,
        overlay: true
    },
    watchOptions: { //webpack watch设置
        poll: 1000,
        ignored: /node_modules/,
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('mock')
        }),
        new webpack.HotModuleReplacementPlugin(),
    ]
})
 
mockjs 提供本地mock
 
/**
 * 本地mock模块
 * 目前mock模式用的是后台mock服务器，没有用该模块
 */
import Mock from 'mockjs'

// 使用方法: 
//step 1. npm install mockjs
//step 2. import './mock/mock.js' 
//step 3. 在需要的地方调用:
// let res = await util.post({
//     url: '/news/index',
//     data: {}
// })

// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
 
    return {
        articles: articles
    }
}
 
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', produceNewsData);

dev-server文件在最新的vue版本中是webpack.dev.conf.js
 代码没有太大变动，只是语法上有一些改变
 ！！修改后一定重新启动npm run dev,才能访问到接口数据
 webpack.dev.conf.js文件
 
const express = require('express')
const app = express()//请求server
var goodsData = require('../mock/goods')//加载本地数据文件
var router = express.Router()
app.use(router)//通过路由请求数据

......
devServer: {
...
,  before(app){
      app.get('/goods',(req,res)=>{
        res.json(goodsData);
      })
    }
}
 
mock数据
 goods.json
 
{
  "status":"0",
  "msg":"",
  "result":[
    {
      "productId":100001,
      "productName":"音响",
      "productPrice":"199",
      "productImg":"1.jpg"
    },
    {
      "productId":100002,
      "productName":"入耳式耳机",
      "productPrice":"99",
      "productImg":"2.jpg"
    },
    {
      "productId":100003,
      "productName":"头戴式耳机",
      "productPrice":"399",
      "productImg":"3.jpg"
    },
    {
      "productId":100004,
      "productName":"头戴式耳机",
      "productPrice":"399",
      "productImg":"4.jpg"
    },
    {
      "productId":100005,
      "productName":"充电宝",
      "productPrice":"99",
      "productImg":"5.jpg"
    }
  ]
}
 
前端组件代码实现
 GoodList.vue
 
      <li v-for = "(item,index) in goodsList">
                  <div class="pic">
                    <a href="#"><img v-bind:src="'/static/'+item.productImg" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName}}</div>
                    <div class="price">{{ item.productPrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m">加入购物车</a>
                    </div>
                  </div>
                </li>
 
界面展示
 
 参考最新的vue webpack模板没有dev-server.js文件，进行后台数据模拟笔记

proxy 代理 笔记
 
本地mock接口webpack配置
 
proxy: {
  "/api": {
    target: "http://localhost:3000",
    changeOrigin： true,
    pathRewrite: {"^/api" : "/mockApi"}
  }
}
 
CORS跨域 （node）
 
var express = require('express');
var app = express();
var allowCrossDomain = function (req, res, next) {
	//res.header('Access-Control-Allow-Origin', '*');
  	res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
 	res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  	res.header('Access-Control-Allow-Headers', 'Content-Type');
  	next();
}
app.use(allowCrossDomain);

 
webpack-plugin 实现跨域
 
把前端服务和后端服务绑到一起
 安装中间件
 
cnpm i webpack-dev-middleware -S
 
在node server中
 
//app.use(require('webpack-dev-middleware')(require('webpack')(require('./webpack.config.js'))))

let webpack = require('webpack')
let middle = require('webpack-dev-middleware')
let compiler = webpack(require('./webpack.config.js'))
app.use(middle(compiler ))