mock資料和後端請求介面如何共存

要開發一個vue專案，直接在以前其他專案的程式碼上改，專案基礎模組包括登入已經完成，所以是帶後臺的，增加新的模組時想先採用mock來模擬後臺資料，所以就要考慮到mock資料和後端介面共存的問題。

然後在網上查到的方法都如下：

具體參考：http://www.bubuko.com/infodetail-3099079.html

在專案根路徑下的vue.config.js中配置如下：

devServer: {
  port: port,
  open: true,
  overlay: {
   warnings: false,
   errors: true
   },
  proxy: {
   // change xxx-api/login => mock/login
   // detail: https://cli.vuejs.org/config/#devserver-proxy
    [process.env.VUE_APP_BASE_API+‘/user/info‘]: {
    target: `http://localhost:${port}/mock`,
    changeOrigin: true,
    pathRewrite: {
      [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
     }
    },
    [process.env.VUE_APP_BASE_API]:{
    target: process.env.VUE_APP_BASE_API,
    changeOrigin: true,
    pathRewrite: {
      [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
     }
    }
   },
  after: require(‘./mock/mock-server.js‘)
  }
 

主要的思路就通過代理，是‘/user/info‘的請求就轉發到mock中，其他請求就轉發到後臺，這樣就可以同時使用mock和後臺介面的資料了。

參照這種方法，在系統中配置之後，測試請求並無法被mock攔截，提示404找不到該請求，原訪問後臺的介面訪問依然是正常的。只有訪問Mock的是404。

後來經同事的除錯及查詢，改為如下配置就可以了：

module.exports = {
 publicPath: '/',
 outputDir: 'dist',
 assetsDir: 'static',
 lintOnSave: process.env.NODE_ENV === 'development',
 productionSourceMap: false,
 devServer: {
  //host: '0.0.0.0',
  port: port,
  open: true,
  overlay: {
   warnings: false,
   errors: true
   },
  before: require('./mock/mock-server.js'),
  proxy: {
    [process.env.VUE_APP_BASE_API]: {
    target: 'http://172.22.190.235:30015',
    changeOrigin: true
    }
   },
  },
 

該配置跟網上查詢的不同就是，刪除了這段配置，原因可能是因為本專案的框架相關包的版本跟網上舉例子那個的不同，導致的。

[process.env.VUE_APP_BASE_API+‘/user/info‘]: {
    target: `http://localhost:${port}/mock`,
    changeOrigin: true,
    pathRewrite: {
      [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
     }
    },

所以搜資料的時候要注意下版本和區別！！！！

附本機vue版本