伸手党系列四:vue-cli3.0以上 使用 proxy 进行跨域设置

基础知识

跨域:出于浏览器的同源策略限制,当一个请求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 值了。

看完感觉还行请记得点个赞,您的支持是我创作的动力。谢谢!

你可能感兴趣的:(伸手党系列四:vue-cli3.0以上 使用 proxy 进行跨域设置)