利用 devServer.before 返回模拟数据，并且可以在 NetWork 中看到请求

webpack.docschina.org/configurati…

好处：1. 操作简单； 2. 可以在 network 中查看请求接口

本地开发配置

1. vue.config.js 启用 before 配置

   module.exports = {
       devServer: {
           before: process.env.VUE_APP_USE_MOCK === 'TRUE' && require('./mock')
       }
   }
   

2. .env.development 开发模式

   NODE_ENV=development
   VUE_APP_USE_MOCK=TRUE
   

3. 在项目根路径新建名为 mock 的文件夹，并新增文件

   • ./mock/index.js

     /* eslint-disable @typescript-eslint/no-var-requires */
     const Mock = require('mockjs')
     const userLogin = require('./userLogin')
     const userLogout = require('./userLogout')
     const getVideos = require('./getVideos')
     
     module.exports = (app/* , server */) => {
         app.post(/user\/login/, (req, res) => {
             res.json(Mock.mock(userLogin(req)))
         })
         app.post(/user\/logout/, (req, res) => {
             res.json(Mock.mock(userLogout))
         })
         app.get(/user\/getVideos/, (req, res) => {
             res.json(Mock.mock(getVideos(req)))
         })
     }
     

   • ./mock/userLogin.js （POST请求）

     module.exports = (req) => {
         const { url, method, params } = req
         console.log(JSON.stringify({ url, method, params }, null, 4))
         return {
             code: '200',
             message: '成功',
             data: {
                 tokenValue: '@guid()',
                 userName: '@cname()',
                 userId: '@id()',
             }
         }
     }
     

   • ./mock/userLogout.js （POST请求）

     module.exports = {
         code: '200',
         message: '成功'
     }
     

   • ./mock/getVideos.js （GET请求）

     module.exports = (req) => {
         const { url, method, query } = req
         console.log(JSON.stringify({ url, method, query }, null, 4))
         return {
             code: '200',
             message: '成功',
             'data|5-10': [{
                 url: '@url()'
             }]
         }
     }
     

本地联调配置

1. vue.config.js （启用 proxy 配置，before 需要置失效）

   devServer: {
       before: process.env.VUE_APP_USE_MOCK === 'TRUE' && require('./mock')
       proxy: {
           [process.env.VUE_APP_BASE_URL]: {
               target: process.env.VUE_APP_PROXY_URL,
               changeOrigin: true,
               pathRewrite: {
                   [process.env.VUE_APP_BASE_URL]: ''
               }
           }
       }
   }
   

2. .env.test 联调模式（直接删除 VUE_APP_USE_MOCK 即可）

   NODE_ENV=development
   VUE_APP_BASE_URL=/api
   VUE_APP_PROXY_URL=http://ipxxx:port