vue.config.js

脚手架搭建的项目，想要修改webpack配置，直接增加一个vue.config.js文件会自动识别.然后配置本地代理

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
    //baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: "./",
    
    // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
    outputDir: "mycli3",
    //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: "assets",
    //指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
    // indexPath: "myIndex.html",
    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,
    
    // lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    //如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
    // lintOnSave: process.env.NODE_ENV !== 'production',
    
    //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
    // runtimeCompiler: false,
    
    /**
    * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    * 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
    * map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
    * 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
    * */
    productionSourceMap: false,
    
    // 它支持webPack-dev-server的所有选项
    devServer: {
        // host: "127.0.0.1",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    
        // 配置多个代理
        proxy: {
            "/api": {
                target: "http://139.196.42.209:5004/api", // 要访问的接口域名
                //ws: true, // 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
                }
            }
        }
    }
}

二次封装axios

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
    //baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: "./",
    
    // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
    outputDir: "mycli3",
    //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: "assets",
    //指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
    // indexPath: "myIndex.html",
    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,
    
    // lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    //如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
    // lintOnSave: process.env.NODE_ENV !== 'production',
    
    //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
    // runtimeCompiler: false,
    
    /**
    * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    * 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
    * map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
    * 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
    * */
    productionSourceMap: false,
    
    // 它支持webPack-dev-server的所有选项
    devServer: {
        // host: "127.0.0.1",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    
        // 配置多个代理
        proxy: {
            "/api": {
                target: "http://139.196.42.209:5004/api", // 要访问的接口域名
                //ws: true, // 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
                }
            }
        }
    }
}

发送请求时就不需要输入前面的http://139.196.42.209:5004/api了。
但是我配置完发送请求仍然不是从我本地发送的，请求地址还是http://139.196.42.209:5004/api/user/info，就是说代理没有配置成功。
原因是我的.env.development文件里面写的
然后还需要更改

EVN = 'development'

VUE_APP_BASE_API = 'http://139.196.42.209:5004/api'

改为

EVN = 'development'

VUE_APP_BASE_API = '/api'

本地代理成功
在这里插入图片描述

关于代理

在平时的工作中，总是会遇到代理的概念。之前我只知道有代理这个概念，不过对其没有一个清晰的理解。于是带着以下两个问题开始学习正向代理以及反向代理。

什么是正向代理，什么是反向代理
正向代理可以做什么，反向代理可以做什么
概念
首先附上一张说明图，先有一个整体的理解。

正向代理（ Forward Proxy ）：是指是一个位于客户端和原始服务器之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。

反向代理（ Reverse Proxy ）：是指以代理服务器来接受 Internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 Internet 上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

特点
正向代理
代理客户;
隐藏真实的客户，为客户端收发请求，使真实客户端对服务器不可见;
一个局域网内的所有用户可能被一台服务器做了正向代理，由该台服务器负责 HTTP 请求;
意味着同服务器做通信的是正向代理服务器;
反向代理
代理服务器;
隐藏了真实的服务器，为服务器收发请求，使真实服务器对客户端不可见;
负载均衡服务器，将用户的请求分发到空闲的服务器上;
意味着用户和负载均衡服务器直接通信，即用户解析服务器域名时得到的是负载均衡服务器的 IP ;
共同点
都是做为服务器和客户端的中间层
都可以加强内网的安全性，阻止 web 攻击
都可以做缓存机制
实际应用
Nginx 服务器
Nginx 服务器的功能有很多，诸如反向代理、负载均衡、静态资源服务器等。

客户端本来可以直接通过 HTTP 协议访问服务器，不过我们可以在中间加上一个 Nginx 服务器，客户端请求 Nginx 服务器，Nginx 服务器请求应用服务器，然后将结果返回给客户端，此时 Nginx 服务器就是反向代理服务器。

在虚拟主机的配置中配置反向代理

虚拟主机的配置

server {
listen 8080; # 监听的端口
server_name 192.168.1.1; # 配置访问域名
root /data/toor; # 站点根目录
error_page 502 404 /page/404.html; # 错误页面
location ^~ /api/ { # 使用 /api/ 代理 proxy_pass 的值
proxy_pass http://192.168.20.1:8080; # 被代理的应用服务器 HTTP 地址
}
}
以上简单的配置就可以实现反向代理的功能。

当然反向代理也可以处理跨域问题，在 Vue 中就可以使用 proxyTable 这个属性进行相关的配置来解决跨域问题带来的烦恼。配置如下：

…
proxyTable: {
‘/weixin’: {
target: ‘http://192.168.48.11:8100/’, // 接口的域名
secure: false, // 如果是 https 接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
‘^/weixin’: ‘’
}
},
},
…
负载均衡的配置

upstream 表示负载服务器池，定义名字为 my

upstream my {
server 192.168.2.1:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.2.2:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.2.3:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.2.4:8080 weight=1 max_fails=2 fail_timeout=30s;

即在 30s 内尝试 2 次失败即认为主机不可用

}
负载均衡即将请求/数据轮询分摊到多个服务器上执行，负载均衡的关键在于均匀。

也可以通过 ip-hash 的方式，根据客户端 ip 地址的 hash 值将请求分配给固定的某一个服务器处理。

另外，服务器的硬件配置可能不同，配置好的服务器可以处理更多的请求，这时可以通过 weight 参数来控制。

原文链接：https://blog.csdn.net/qq_44529230/article/details/122068443