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地址根据自己情况更换)
        }
    }
复制代码

启动nginx

有两种方法启动nginx

  • 双击目录下的nginx.exe
  • 命令行进入该文件夹,执行start nginx命令,也会直接启动nginx服务器

启动后会出现一个小的黑色屏幕然后马上关闭

验证

输入在http://localhost会出现以下页面,表示已经访问成功!

改为上方自己设置的端口号 项目就已经运行起来了!!就可以愉快的测试了。

更多的nginx指令

  • 启动服务:start nginx
  • 退出服务:nginx -s quit
  • 强制关闭服务:nginx -s stop
  • 重载服务:nginx -s reload  (重启,服务不会中止)
  • 验证配置文件:nginx -t
  • 使用配置文件:nginx -c
  • 使用帮助:nginx -h

在操作中如果发现运行不了nginx则先通过命令行终止再打开即可

分类:
前端
标签: