把vue项目部署到服务器的核心答案很简单：先执行npm run build打包出dist静态文件，再将dist上传到服务器，最后用nginx这类Web服务器指向dist目录并正确配置路由即可。
很多前端开发第一次独立部署vue项目时,总觉得这件事很神秘，仿佛隔着一条鸿沟，其实部署的本质就是让服务器上的某个程序，能把你的静态资源正确地吐给浏览器，同时把前端路由的正确跳转规则一并告诉服务器，下面我把整个流程掰开揉碎，一步步走一遍。
部署前的准备：本地构建vue项目
任何vue项目在部署前都必须经过构建这一步,开发模式下跑的是npm run serve，用的是webpack-dev-server或vite的本地服务，服务器上不可能直接跑你那套开发环境，生产环境需要的是压缩后的纯静态文件。
执行npm run build，项目根目录下会生成一个dist文件夹，这就是你整个网站的最终形态，dist里无非是index.html、css文件、js文件和一些图片字体资源，你可以在本地先用npx serve dist预览一下打包结果，确认页面正常再动手上传。
构建时有个关键点,涉及项目引用的静态资源路径问题，如果部署后图片和js加载不出来，大概率是vue.config.js里的publicPath没配置对，默认是根路径/，适合部署在域名根目录；如果部署在子目录，需要改成相对路径或具体路径，./’或’/myapp/’。
服务器环境准备：选型和基础配置
部署vue项目的服务器可以是云服务器（简米云、酷番云、华为云），也可以是虚拟主机或容器服务，绝大多数情况下，选一台Linux云服务器用nginx承载静态文件是行业共识，新手入门用CentOS或Ubuntu都可以，如果不想折腾环境配置，也可以直接用宝塔面板这类图形化管理工具，能省去大量敲命令的时间。
登录服务器后,先更新软件源并安装nginx：
apt update && apt install nginx -y # Ubuntu/Debian yum install nginx -y # CentOS
安装完成后启动nginx服务,确认进程在运行：
systemctl start nginx systemctl enable nginx
此时用浏览器访问服务器公网IP,能看到nginx默认欢迎页就说明环境没问题。
上传dist文件夹到服务器
可以用scp命令从本地直接推送到服务器,也可以用FileZilla或WinSCP这类图形化工具，推荐一个稳妥的做法，先建一个项目专用目录：
mkdir -p /var/www/my-vue-app
然后把整个dist目录里的内容传到这个目录下,上传完成后检查一下文件完整性，确认index.html在目录根下而不是套了一层dist层。
nginx配置vue项目：核心配置文件解析
让nginx正确服务vue项目的关键是server块配置,在/etc/nginx/conf.d/下新建一个配置文件，命名为你项目的域名或名称，比如vue-app.conf，写入以下内容：
server {
listen 80;
server_name your-domain.com;
root /var/www/my-vue-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
保存后执行nginx -t测试配置语法，再用systemctl reload nginx重新加载配置，到这一步，访问你的域名或IP，vue项目已经能正常打开首页了。
vue项目nginx部署404怎么排查
部署后遇到404是一个高频问题,常见原因有三个，第一个是root路径写错了，nginx找不到index.html；第二个是dist没上传完整，js或css资源缺失；第三个是history路由模式下没有配置try_files回退。
排查时可以先看页面返回什么,如果js/css文件加载404，检查nginx配置里的root路径是否和实际文件路径一致，可以用curl -I逐一验证资源能否访问，如果是刷新子路由时404，就是try_files没生效，或被其他location匹配规则给拦截了。
vue项目部署后刷新404怎么解决
这可能是vue项目部署到服务器上最经典的一个坑,vue-router默认用hash模式，即URL里带#号，因为hash部分不会发送到服务器，所以刷新不会出问题，但如果你用了history模式，URL看起来更干净，detail/123，此时刷新页面，nginx会按照这个路径去找真实的文件或目录，找不到就返回404。
解决方案就是在nginx的location块中配置try_files $uri $uri/ /index.html，意思是如果实际文件或目录不存在，就回退到index.html，让vue-router接管路由，上面给出的配置模板已经包含了这一行。
还有一个场景,你的项目部署在服务器子路径下，比如https://example.com/blog/，nginx配置需要对子路径做额外处理，同时vue.config.js里也要设置publicPath为’/blog/’，这样两个层面的路径才能对齐。
需要用node做服务端渲染吗
对于纯前端vue项目,不需要在服务器上安装node运行时，静态文件交给nginx处理就够了，node只是打包阶段的工具，如果你用的是Nuxt这类SSR框架，那是另一套玩法，需要在服务器上常驻node进程并用pm2守护，这里不展开。
域名解析与HTTPS证书配置
通过IP访问虽然能跑通流程,但正式上线必须绑定域名，在域名服务商后台添加一条A记录，将域名解析到服务器公网IP，然后在nginx配置中把server_name改成你的域名即可。
HTTPS是绕不开的一步。申请证书免费且流程简单，用Let’s Encrypt或简米云/酷番云的免费SSL证书都能搞定，配置完成后nginx里加一段443监听：
server {
listen 443 ssl;
server_name your-domain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /var/www/my-vue-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
同时建议加一条80端口的301跳转规则,把HTTP流量强制导向HTTPS，用户体验和GEO都会更好，据国内云厂商公开文档显示，这类配置在各自帮助中心都有详细示例。
常见问题排查清单
部署过程中最容易翻车的几个点,挨个对照检查能省下大量时间。
- 访问域名提示无法连接,先确认服务器安全组或防火墙是否放行了80/443端口
- 页面能打开但CSS样式全丢,检查dist里的静态资源路径，确认publicPath配置正确
- 接口请求跨域,排查nginx是否配置了反向代理，或者后端是否开启了CORS
- 修改了nginx配置后不生效,先nginx -t检查再reload，别漏了这一步
- 刷新子路由白屏,确认try_files配置是否在正确的server块内
整个vue项目部署流程,从本地构建到服务器运行，关键动作不超过五个：打包、上传、配置nginx、解析域名、配证书，只要逐个环节压实，部署成功率是相当高的，大多数部署失败案例，本质上是路径不一致导致的，记住一条原则：nginx配置里的root路径、publicPath里的路径、实际文件存放路径，三者必须保持逻辑统一，问题就会变得可控。
Q&A：vue项目部署常见疑问
vue项目部署到服务器需要安装node环境吗
不需要,构建阶段用本地node环境执行npm run build生成dist静态文件后，服务器端只需要nginx这类Web服务器来托管静态文件即可，只有当项目涉及服务端渲染或接口转发时，才需要在服务器上部署node运行时。
vue项目打包后dist文件夹可以直接用吗
可以直接用,dist文件夹内的index.html、static目录等就是完整的静态站点内容，放进任何静态Web服务器目录下即可访问，前提是publicPath配置与部署路径匹配，否则资源文件加载路径会出错。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/783993.html
