vue-cli@2.X中的配置
主要解决的是接口问题和路径问题
1. 后台配置了允许跨域时的配置步骤（侧重接口问题处理）
1.1 第一步: 在 /config/dev.env.js中添加如下代码:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// 添加下面这行代码: 表示在开发环境下请求的服务器端接口
API_ROOT: ' "http://localhost:3000/api" '
})
1.2 第二步: 在 /config/prod.env.js 中添加如下代码:
module.exports = {
NODE_ENV: '"production"',
// 添加下面这行代码: 表示在生产环境下请求的服务器端接口
API_ROOT: ' "http://localhost:3000/api" '
}
1.3 第三步: 在发送axios请求之前，设置请求的基础URL即可
axios.defaults.baseURL = process.env.API_ROOT;
// 注意: process.env 是一个全局变量，可以判断当前的环境。
2. 后台未设置允许跨域请求时（侧重路径问题处理）
2.1 第一步: 在 /config/index.js中添加如下配置
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// --------------新添加的代理内容-----------------------------
// 原本proxyTable属性中对象为空，在此进行proxy代理配置（可以跨域）
proxyTable: {
'/api': {
target: 'http://localhost:3000', // target表示代理的服务器url
pathRewrite: { // pathRewrite表示路径重写，key表示一个正则，value表示别名
'^/api': '/api' // 即用 '/api'表示'http://localhost:3000/api'
}
}
},
// ---------------------------------------------------------
host: 'localhost',
port: 8080, // 开启服务器的端口
autoOpenBrowser: false, // 是否开启在浏览器中打开
errorOverlay: true,
notifyOnErrors: true,
poll: false,
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
},
build: {
// build时输出的index.html文件，可以自定义路径
index: path.resolve(__dirname, '../dist/index.html'),
// build时输出的静态(除了index.html)资源路径
assetsRoot: path.resolve(__dirname, '../dist'),
// build时输出静态资源的二级目录
assetsSubDirectory: 'static',
// 代表打包后，index.html里面引用资源的的相对地址
assetsPublicPath: './',
// 是否开启cssSourceMap
productionSourceMap: true,
devtool: '#source-map',
// 是否开启gzip
productionGzip: false,
// 需要用gzip压缩的文件扩展名
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}
2.2 其余的配置步骤和后台允许跨域时的步骤相同
vue-cli@3.X中的配置
主要解决的同样是接口问题和路径问题
1. 后台配置了允许跨域时的配置步骤（侧重接口问题处理）
axios.defaults.baseURL = process.evn.NODE_ENV === 'development' ? 'devUrl' : 'propUrl'
/*
参数解释:
1. devUrl : 开发环境中请求的后台url
2. propUrl : 生产环境中请求的后台url
*/
2. 后台未设置允许跨域请求时（侧重路径问题处理）
2.1. 第一步: 接口配置同上
2.2. 第二步: 路径和axios配置如下:
2.2.1 在与package.json文件的同级目录下创建 vue.config.js, 内容如下:
详细参考见网址:
module.exports = {
devServer: {
publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
proxy: {
'/api': {
target: '<url>',
pathRewrite: {
'^/api' : '/api'
}
},
'/foo': {
target: '<other_url>'
pathRewrite: {
'^/foo': '/foo'
}
}
}
}
}
/*
示例: 远程服务器未处理跨域，接口为: http://localhost:3000/api/
本地开发环境中的url为: http://localhost:8080
1. proxy: {
2. '/api5': {
3. target: 'http://localhost:3000',
4. pathRewrite: {
5. '^/api5' : '/api'
6. }
7. }
8. }
其中
第2行中的 '/api5'是自定义的本地请求时的名字
第3行的target表示代理的服务器url
第4行的pathRewrite表示路径重写
第5行的'^/api5'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8080/api5' 转接为 http://localhost:3000/api/
*/
