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命令。

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

相关推荐
南玖i1 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel1 小时前
Web发展与Vue.js导读
前端
YAY_tyy1 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801465 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店6 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy6 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿8 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库