vue 代理设置 访问图片_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中，如图：

大功告成！