标签:服务 配置 pac 静态 get ase ice set pack
vue项目如何请求后端api?
vue-cli脚手架生成的webpack标准模板项目
HTTP库使用axios
整体思路:
具体步骤如下:
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接口服务,使用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
同开发环境,无需重复配置
待续……
标签:服务 配置 pac 静态 get ase ice set pack
原文地址:https://www.cnblogs.com/zhq--blog/p/10206568.html