vue-cli 配置mock服务

vue-cli 生成项目配置本地mock服务以及proxy服务

// vue.config.js
devServer: {
  // 配置mock服务，在 static/目录下，增加 mock/xxx.json 文件，作为请求接口地址
  // mock服务接口以 /mock 做为前缀
    before(app) { 
      app.get(/\/mock\/\w+\.json/ig, (req, res) => {
        // req['_parsedUrl'].pathname 是解析后的路径，
        // 我本人的接口请求都会额外带一个 _t 时间戳参数
        // 实际请求时会是 /mock/xxx.json?_t=3475734724 
        // 因此这里直接用解析后的隐藏参数req['_parsedUrl'].pathname
        // 如果你没有时间戳参数或者其他参数（非接口请求参数），可替换为 req.url 获取接口地址
        // 另外一种方法就是直接修改上面的正则表达式，将参数部分填进去
        fs.readFile(path.join(__dirname, `/static/${req['_parsedUrl'].pathname}`), 'utf8', (err, data) => {
          if (err) throw err;
          res.json(data);
        });
      });
    },
    proxy: { // proxy，根据不同的请求前缀可实现多处源头的代理,一下接口请求以 /api 为前缀
      '^/api': {
        target: 'http://xxx.xxx.xxx.xxx',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }