Vue项目部署到服务器

今天刚刚在腾讯云上买的服务器,买了个最便宜的88一年。
我使用Tomcat作为web应用服务器,使用宝塔面板快速安装的Tomcat。
在我们自己电脑上运行npm run build命令将vue项目打包,打包后会生成dist目录,再将这个目录压缩为zip文件

我使用Tabby作为远程连接工具连接服务器

使用其自带的SFTP将zip文件上传到tomcat/webapps/root目录下
安装unzip来解压zip文件yun install -y unzip
使用unzip dist.zip直接将其解压到当前目录
启动tomcat服务器,访问> http://公网ip:端口/dist
访问后发现虽然可以访问成功,但页面是一片空白,百度了之后原因是路由路径问题,要在配置文件中添加> publicPath配置

注:这是Vue3的配置方式
果然加上之后可以正常访问了。
我们在打包成功之后可以自己先点击dist目录下的index.html访问一下看是不是正常,没问题了部署到服务器上。由于我是个新手,一开始没想到这个问题,都是部署之后再访问看是不是正常,多走了弯路。

posted @   程长新  阅读(815)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示