背景
vue-cli脚手架生成的webpack标准模板项目
HTTP库使用axios
一、开发环境跨域与API接口服务通信
整体思路:
- 开发环境API接口请求baseURL为本地http://localhost:8080
- 为本地请求配置代理,代理目标服务器设置为接口服务所在地址或域名
具体步骤如下:
1、config/dev.env.js文件中配置baseURL
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:8080"' //配置为本地地址才会访问到本地虚拟的服务器,从而通过第1步中代理访问API服务,避免跨域
})
2、axios配置baseURL
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
3、config/index.js文件中配置开发环境代理
module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 代理配置信息
'/taskinfo': {
target: 'http://192.168.162.22:8381/taskinfo', // API服务所在IP及端口号
changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
pathRewrite: {
'^/taskinfo': '' // 重写路径
}
}
}, ……
}
}
二、生产环境配置API接口服务信息
生产环境直接指向API接口服务,使用IP或域名
1、config/dev.env.js文件中配置baseURL
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://192.168.162.22:8381/"' // API服务所在IP及端口,或域名
}
2、axios配置baseURL
同开发环境,无需重复配置
三、生产环境静态文件获取目录(静态文件独立部署)
待续……