前言
vue解决跨域问题很简单,只需要修改cli中的配置,在vue.config.js
文件中修改以下内容即可,没有此文件的可以自行创建。
一、所有接口统一配置
module.exports = {
devServer: {
proxy: 'http://192.168.0.1'
}
}
注意:
1、 proxy
内容是需要代理的地址,仅ip或域名,不包含具体地址;
2、如果地址带有端口号的话,端口号也要带上。
二、不同地址分开配置
一个项目中,有时可能会出现多个不同路径地址,这个时候就需要分别去做代理。
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
pathRewrite: { "^/api": "/" },
},
'/foo': {
target: '<other_url>',
pathRewrite: { "^/foo": "/" },
}
}
}
}
三、搭配环境变量使用
项目开发过程中,开发环境和生产环境是不同的,为了区分,搭配环境变量使用,是一个值得推荐的方法。
在项目根目录下创建以下两个文件
开发环境
文件名: .env.development
内容:
NODE_ENV = 'development'
VUE_APP_LOGIN = "http://192.168.0.1"
VUE_APP_URL = "http://192.168.0.1/foo"
生产环境
文件名: .env.production
内容:
NODE_ENV = 'production'
VUE_APP_LOGIN = ""
VUE_APP_URL = "/foo"
vue.config.js
中devServer
内容
module.exports = {
devServer: {
proxy: {
'/api': {
target: process.env.VUE_APP_LOGIN ,
pathRewrite: { "^/api": "" },
},
'/foo': {
target: process.env.VUE_APP_URL ,
pathRewrite: { "^/foo": "" },
}
}
}
}
注意:
1、环境变量中NODE_ENV
的命名和值是固定的,不做修改;
2、其它环境变量的命名和值都可自定义;
3、如果接口没有统一前缀,可以自行手动添加,以便于配置代理,代理时需要替换为空。