基础知识
跨域：出于浏览器的同源策略限制，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
process： process 对象是一个全局变量，它提供有关当前 Node.js 进程的信息并对其进行控制。简单说它就是在nodejs中的一个全局变量。
pathRewrite 是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址。
vue cli3.0以上和cli2.0变化较大，简化了很多东西，减少了很多配置文件。
在vue cli3.0版本以上进行跨域设置时需要我们自己在项目的根目录中创建一个vue.config.js文件
01.png
内部设置如下，我们要进行设置的就是devServer下的 proxy
① api格式不统一时使用如下方法
api如下格式 ↓ ↓ ↓
// bxx/xxx/xxx api开头不是统一格式
// axx/xxx/xxx api开头不是统一格式
// cxx/xxx/xxx api开头不是统一格式
**// 当我们的api不是统一格式的时候使用该方法.**
module.exports = {
// 公共路径(必须有的)
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// 静态资源存放的文件夹
assetsDir: "static",
// eslint-loader 是否在保存的时候检查
lintOnSave: false,
runtimeCompiler: false,
productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建
devServer: {
hot: true,
open: true, // 执行项目启动命令后，自动打开项目首页面
host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
port: 8080, // 开发服务器运行端口号
proxy: {
'/api': { //将www.qianbuduo.vip印射为/api
target: 'http://www.qianbuduo.vip', // 我们要请求的接口域名
// target: process.env.VUE_APP_URL,
changeOrigin: true, //是否跨域
ws: true,
pathRewrite: {
'^/api': '' ,
// ^/api是一个标示，就是用来告诉node这个连接要用代理。
// '/api': 就是告诉node, 我接口只要是'/api'开头的才用代理.
// 所以我们的接口要这么写 /api/xxx/xxx. 这样最后代理的路径就是http://www.qianbuduo.vip/api/xx/xx.
// 但是我们正确的接口路径里面没有/api. 这时候就需要用到 pathRewrite,
// 用''^/api'':'', 把'/api'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉多余的api. 这样最后代理的路径就是http://www.qianbuduo.vip/xx/xx.
}
}
},
},
}
配置完成后需要重新编译一遍 , 调用接口的时候
let param = {};
this.$axios.get( 'api' + 'xxx/xxx/xxx', param)
.then((res) => {
})
.catch((err) => {
return err;
});
② api格式统一时使用如下方法
( 这样调用接口的时候就不需要再添加api了，直接调用接口就可以例如：this.$axios.get('xxx/xxx/xxx'))
api如下格式 ↓ ↓ ↓
// api/xxx/xxx api开头是统一格式
// api/xxx/xxx api开头是统一格式
// api/xxx/xxx api开头是统一格式
**// 当我们的api是统一格式的时候使用如下方法.**
module.exports = {
// 公共路径(必须有的)
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// 静态资源存放的文件夹
assetsDir: "static",
// eslint-loader 是否在保存的时候检查
lintOnSave: false,
runtimeCompiler: false,
productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建
devServer: {
hot: true,
open: true, // 执行项目启动命令后，自动打开项目首页面
host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
port: 8080, // 开发服务器运行端口号
proxy: {
'/api': { //将www.qianbuduo.vip印射为/api
target: 'http://www.qianbuduo.vip', // 我们要请求的接口域名
// target: process.env.VUE_APP_URL,
changeOrigin: true, //是否跨域
ws: true,
}
}
},
},
}
这样我们的跨域就设置好了~~~
③ 创建配置项目地址文件
但是实际开发中需要经常切换地址很麻烦，所以我们可以把 proxy 里的 target 设置为 活动的值process.env.VUE_APP_URL；
process在文中开头已经介绍过了，是node的一个全局变量；
它里面的参数设置可以如下方法 ↓ ↓ ↓
首先我们可以在项目根目录创建4个文件 （效果如下图）
.env文件 .env.development文件 .env.production文件 .env.testing 文件
02.png
.env 全局默认配置文件，不论什么环境都会加载合并
// .env文件
VUE_APP_URL = '全局URL'
VUE_APP_TITLE= '全局属性'
.env.development 开发环境下的配置文件
// .env.development 文件
VUE_APP_URL= "http://192.168.2.137" // 开发环境URl
VUE_APP_HUANJING= "本地开发环境"
NODE_ENV: '"development"',
.env.production 生产环境下的配置文件
// .env.production 文件
VUE_APP_URL= "http://www.qianbuduo.vip" // 生产环境URl
VUE_APP_HUANJING= "正式生产环境"
NODE_ENV: '"production"',
.env.testing测试环境下的配置文件
// .env.testing文件
VUE_APP_URL= "http://192.168.xxx.xxx" // 测试环境URl
VUE_APP_HUANJING= "测试环境"
VUE_APP_TITLE= 'testing'
.env 是全局默认配置文件任何环境下打印process.env都能打印。
当.env文件内的属性名称和当前环境下配置文件的属性相同时，当前和环境下的属性值会覆盖全局属性值。
例如，当我们在本地开发环境下打印 process.env时，会打印出所有.env的属性，VUE_APP_URL这个属性在全局和本地开发环境都有，所以打印出来的值会是本地开发环境里面设置的VUE_APP_URL。
03.png
关于文件具体内容要求：
注意：
①属性名必须以VUE_APP_开头，比如VUE_APP_XXX，否则不会生效。
②每次修改参数后都要重新启动项目，否则不会生效。
这样只要我们设置好各环境下的 VUE_APP_URL 的值，就可以在 vue.config.js 中的 proxy 里直接设置target: process.env.VUE_APP_URL； 就可以自动获取当前环境下的 url 值了。
看完感觉还行请记得点个赞，您的支持是我创作的动力。谢谢！
网友评论