vue搭建項目之設置代理

前面將項目頁面、axios、組件等都准備好了，現在就差設置代理了：

首先在config下新建兩個文件，分別叫做dev.uri.js和prod.uri.js，代碼為：

module.exports = {
  BASE_URI: '/api'
}

然后將dev.env.js的代碼改為：

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const BASE_URI = require('./dev.uri').BASE_URI;


module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: `"${BASE_URI}"`
})

prod.env.js的代碼改為：

const BASE_URI = require('./prod.uri').BASE_URI;

module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: `"${BASE_URI}"`
}

接着新建名為proxy-mock.js的文件，其中代碼為：

const url = require('./dev.uri').BASE_URI;

module.exports = {
  [url]: {
    target: 'http://XXX.XXX.X.XX:8080',（連接地址）
    changeOrigin: true,
    pathRewrite: {
      ['^' + url]: ''
    }
  }
}

代理設置好了，現在將它引入到index.js中，如圖：

 

大功告成！