vue前端项目打包和部署

一、打包

1.在项目终端使用npm run build命令进行打包,打包完成后我们会在左边的项目文件夹中得到dist文件夹,找到这个文件夹的位置,后续我们会用到。在打包前要将node_modules文件夹删除,否则你打包后的dist文件会非常大。

二、部署

前端和后端开发人员开发好后,要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。

1.下载nginx

官网地址nginx

2.启动nginx

nginx压缩包解压后双击nginx.exe,之后会闪过一个小弹窗。

通过在浏览器中访问localhost路径,出现以下页面则代表nginx启动成功。

将打包的前端项目文件夹复制到nginx文件夹里面,复制dist文件夹的路径,后面会用到

点击conf文件夹

用记事本打开conf文件夹下面的nginx.conf

在nginx.conf里面配置下面的代码

server {

listen 8080;

server_name localhost;

location / {

这里配置前端项目的静态文件路径

root /这里需要替换自己前端项目路径/dist;

index index.html;

try_files uri uri/ /index.html; # 解决 Vue 路由刷新 404 问题

}

location /api/ {

这里配置代理到后端服务器的规则

proxy_pass http://localhost:8887/;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

如果后端需要特定的请求头,可以在这里添加

proxy_set_header Some-Header $some_variable;

去掉 /api/ 前缀

rewrite ^/api/(.*) /1 break;

}

}

点击保存后,在nginx文件夹里面通过cmd命令进入终端输入nginx -s reload命令。

输入上面的命令后返回浏览器刷新就会出现你的前端项目页面了

相关推荐
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱2 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript