前言
今天接触到前后端分离的项目，vue打包会放到niginx中，就尝试一下自己在windows中下载配置一下，感受一下操作，不是不下载虚拟机的版本，而是windows版本更有性价比，其实我执行虚拟机总蓝屏（呜呜呜~），写下来当作笔记来用，希望对大家也有所帮助吧，其实我还遇到一个问题就是我后端带项目名称我配置也不好使，我就把后端的配置文件给去掉了,dog,dog,dog！
一 打包vue
1 配置代理 因为nginx配置的时候需要配置反向代理 文件是 vue.config.js 因为我的是vite的所以是vite.config.js 主要是这个/dev-api 名字要与nginx的对应
// vite 相关配置
server: {
port: 80,
host: true,
open: true,
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}
}
},
2 查看build命令是否配置 打开vue的package.json 看到scipts
"scripts": {
"dev": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview"
},
3 vue打包 打包之后再项目下生成文件 dist
执行vue打包 npm run build
我的是执行 npm run build:prod
vue打包完成
二 配置nginx
1 下载nginx
下载网址
2 解压并把 dist 文件夹 复制过来 我这边改名为 myvue
3 修改配置 需要配置服务指定到我的前端项目 指定后端项目需要配置反向代理
打开conf文件夹
编辑
location / {
root myvue;
index index.html index.htm;
}
location /prod-api/ {
# 设置反向代理
proxy\_pass <http://127.0.0.1:8080/>;
add\_header Access-Control-Allow-Origin \*;
# 允许请求地址跨域 \* 做为通配符
add\_header 'Access-Control-Allow-Origin' '\*';
# 设置请求方法跨域
add\_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
# 设置是否允许 cookie 传输
add\_header 'Access-Control-Allow-Credentials' 'true';
# 设置请求头 这里为什么不设置通配符 \* 因为不支持
add\_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
# 设置 options 请求处理
if ( \$request\_method = 'OPTIONS' ) {
return 200;
}
}
注意：
这块需要区别一下 带/和不带的区别 比如访问login请求
proxy\_pass <http://127.0.0.1:8080/>; ==》<http://127.0.0.1:8080/login>
proxy\_pass <http://127.0.0.1:8080;==》http://127.0.0.1:8080/prod-api/login>;
4 重载配置 nginx 启动 cmd
nginx -s reload
控制台执行
5 双击nginx.exe启动即可（什么控制台一闪而过）
看到这个 我就放心了 哈哈哈哈哈哈 最后一个事 ‘撤’
