前言☀️
- 有时候我们打包好
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
则先通过命令行终止再打开即可