vue项目打包本地后通过nginx解决跨域

2021/4/28 7:26:47

编程Tag： vue 配置文件跨域打包 nginx 地址

本文主要是介绍vue项目打包本地后通过nginx解决跨域，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲，为了不麻烦后端人员和避免尴尬，最好的办法就是在本地自己先测一下，而在本地运行打包后的项目会遇到接口跨域的问题。我平时经常用的方法就是配置nginx设置反向代理解决跨域问题。

准备过程

安装nginx，具体怎么安装部署可以参考传送门
准备打包后的vue项目

配置nginx

编辑nginx.conf 配置文件
在配置文件中新增一个server

#新增一个服务
    server {
        listen       8088; # 监听的端口
        server_name  localhost;

        location / {
            root D://Thello/Project/kcgl; # vue 打包后静态文件存放的地址 如果/后面是t开头则要加多一个'/'
            index  index.html; # 默认主页地址
        }

        
        location /kc {
            proxy_pass http://ip地址/kc; # 代理接口地址（此处ip地址根据自己情况更换）
        }
    }