VUE前端项目打包部署云服务器宝塔超详细流程：新手从打包到上线一步不差

文章目录▼CloseOpen

• 第一步：本地VUE项目打包，先避两个致命坑
• 第二步：云服务器装宝塔，5分钟搞定环境
• 第三步：宝塔建站点，传文件+配置Nginx，10分钟上线
  • 为什么本地打包VUE项目后，传服务器打开是空白页？
  • 传VUE打包文件时，是直接传dist文件夹还是里面的内容？
  • VUE项目部署后，刷新页面显示404怎么办？
  • 为什么登不上宝塔面板的登录页面？
  • vue.config.js里的publicPath要怎么改才对？

第一步：本地VUE项目打包，先避两个致命坑

很多人以为“npm run build”点一下就完事，其实打包前要先改两个配置，不然传上去肯定翻车。

首先是vue.config.js里的publicPath——这是VUE项目的资源根路径，默认是“/”，如果直接打包，部署后浏览器会从域名根目录找资源，但你传的是dist文件夹里的文件，肯定找不到。我第一次帮朋友打包时没改这个，结果打开域名全是空白页，后来查VUE官方文档（https://cli.vuejs.org/zh/config/#publicpathnofollow）才知道，要改成“./”（相对路径）或者你即将用的域名（比如“https://www.你的域名.com/”）。举个例子：如果你的项目要部署在“www.你的域名.com/shop”这个子路径下，就填“/shop/”，这样资源才会正确加载。

然后是dist文件夹的内容——npm run build后，项目根目录会生成dist文件夹，里面有index.html和static文件夹（或js、css文件夹）。记住：只需要传dist里的文件，不是整个dist文件夹！我朋友之前犯过傻，把dist文件夹直接传到服务器，结果访问域名时要加“/dist”才能打开，后来我让他把dist里的文件全选复制到站点根目录，就正常了。

给你整理了个打包常见错误表，遇到问题直接查：

错误现象	背后原因	解决办法
打开index.html是空白页	publicPath默认是“/”，本地资源路径不匹配	修改vue.config.js的publicPath为“./”或域名
图片/样式显示“404未找到”	资源引用用了绝对路径（比如/src/assets/logo.png）	改用相对路径（比如“../assets/logo.png”）或process.env.BASE_URL
npm run build报错“依赖缺失”	node_modules版本冲突或未安装完全	删除node_modules和package-lock.json，重新npm install

第二步：云服务器装宝塔，5分钟搞定环境

打包好文件，接下来要给服务器装宝塔面板——它是个可视化工具，能帮你一键装Nginx、MySQL这些环境，不用输复杂命令。

给服务器开8888端口（宝塔的默认登录端口）。不管你用阿里云还是腾讯云，都要去“安全组”里加条规则：端口范围填8888，授权对象填0.0.0.0/0（允许所有IP访问）。我之前没开这个端口，结果登宝塔时一直提示“无法访问”，后来在阿里云安全组里点了“添加规则”才搞定，这步千万不能漏。

然后，安装宝塔。登录服务器的SSH（比如用Xshell或阿里云的“远程连接”），复制这条命令运行：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

（如果是CentOS系统，换centos的脚本，宝塔官网有教程：https://www.bt.cn/help/doc.htmlnofollow）

运行完会弹出登录链接、用户名和密码，比如“http://你的服务器IP:8888/xxxx”，记下来，打开浏览器登录。

登录后先初始化宝塔：改个好记的密码，绑个手机号（用来找回密码），然后点左边“软件商店”，搜索“Nginx”，点“安装”——前端项目需要web服务器，Nginx是最常用的，一键装完不用配置。

第三步：宝塔建站点，传文件+配置Nginx，10分钟上线

环境搞定，现在开始建站点、传文件。

创建站点：宝塔左边点“网站”→“添加站点”，填三个信息：

• 域名：填你买的域名（比如www.你的域名.com），没域名的话先填服务器IP；
• 根目录：默认是“/www/wwwroot/你的域名”，不用改；
• PHP版本：选“纯静态”（前端项目不用PHP）；

点“提交”，站点就建好了。

然后传文件：点站点后面的“文件”按钮，进入站点根目录（比如/www/wwwroot/你的域名），把本地dist里的文件全选，拖进宝塔的文件管理器——记住是“dist里的文件”，不是dist文件夹！我朋友之前传错成dist文件夹，结果访问时要加“/dist”，后来我让他把dist里的index.html、js、css文件夹直接放到根目录，就对了。

接下来配置Nginx——这步是VUE单页应用的关键，不然刷新页面会404。点站点后面的“设置”→“配置文件”，找到“location /”这一段，改成下面这样：

location / {
 root /www/wwwroot/你的域名; # 你的站点根目录
 index index.html index.htm;
 try_files $uri $uri/ /index.html; # 解决单页应用刷新404
}

“try_files”的作用是：如果浏览器请求的文件不存在（比如刷新页面时找路由），就跳回index.html，让VUE自己处理路由。我朋友之前没加这个，刷新页面直接显示“404 Not Found”，加了之后就正常了。

最后测试访问：打开浏览器输你的域名，应该能看到VUE项目的首页了！如果还有问题，比如样式乱了，大概率是publicPath没改对，回头检查一下vue.config.js；如果图片不显示，看看图片路径是不是相对路径。

按照这些步骤做完，你应该能顺利看到自己的项目跑在云服务器上了。我朋友当时上线后盯着屏幕说：“原来这么简单！我之前白熬了夜。” 如果你试了之后还有问题，比如Nginx配置不对，或者端口没开，欢迎留言告诉我——毕竟部署这事儿，踩过坑才记得牢～

为什么本地打包VUE项目后，传服务器打开是空白页？

大概率是vue.config.js里的publicPath没改对。VUE默认的publicPath是“/”，也就是从域名根目录找资源，但你传的是dist里的文件，浏览器肯定找不到。我第一次帮朋友打包时没改这个，结果打开域名全是空白，后来查VUE官方文档才知道要调整。

如果你的项目直接部署在域名根目录（比如www.你的域名.com），可以改成“./”（相对路径）；如果要部署在子路径（比如www.你的域名.com/shop），就得填“/shop/”，这样资源才能正确加载。

传VUE打包文件时，是直接传dist文件夹还是里面的内容？

一定是传dist里面的内容，不是整个dist文件夹！我朋友之前犯过这个错，把dist文件夹直接传到服务器，结果访问域名时得加“/dist”才能打开，特别麻烦。

正确的做法是，打开本地dist文件夹，把里面的index.html、js、css这些文件全选，直接拖进宝塔的站点根目录，这样浏览器访问域名就能直接找到index.html了。

VUE项目部署后，刷新页面显示404怎么办？

这是VUE单页应用的常见问题，因为刷新时浏览器会请求具体的路由路径（比如/shop/detail），但Nginx默认找不到这些“虚拟路径”。我朋友之前也遇到过，刷新商品详情页就404，后来改了Nginx配置才好。

解决办法是在宝塔站点的“配置文件”里，找到“location /”那一段，加上“try_files $uri $uri/ /index.html;”这句话。它的意思是，如果请求的文件不存在，就跳回index.html，让VUE自己处理路由，这样刷新就不会报错了。

为什么登不上宝塔面板的登录页面？

最常见的原因是服务器没开8888端口。宝塔默认用8888端口访问，如果你的云服务器安全组没放行这个端口，浏览器肯定连不上。我第一次装宝塔时就漏了这步，后来在阿里云安全组里加了条规则：端口填8888，授权对象选0.0.0.0/0（允许所有IP访问），才顺利登上。

另外也可以检查下安装命令对不对——CentOS和Ubuntu的宝塔安装脚本不一样，要是输错了脚本，宝塔根本没装成功，自然登不上，最好去宝塔官网复制对应系统的命令。

vue.config.js里的publicPath要怎么改才对？

得看你的项目要部署在哪里。如果是直接部署在域名根目录（比如https://www.你的域名.com），用相对路径“./”最稳妥，这样资源会从当前文件夹加载；如果要部署在子路径（比如https://www.你的域名.com/shop），就得填“/shop/”，注意后面一定要加斜杠，不然路径会少一截，资源还是找不到。

要是你想用绝对路径，也可以填完整的域名（比如“https://www.你的域名.com/”），但相对路径更灵活，换域名也不用再改。实在拿不准的话，可以查VUE官方文档（https://cli.vuejs.org/zh/config/#publicpathnofollow），里面有详细的例子。