Nginx部署Vue项目核心是正确配置静态服务与history路由兜底：先打包确保publicPath适配、dist结构完整并本地验证；再配置Nginx的root、index及location规则，用try_files实现前端路由404回退至index.html。
用 Nginx 部署 Vue 项目，核心就两步：Vue 打包生成静态文件，Nginx 把这些文件当静态资源正确提供出去。关键不是“能不能跑”，而是路由、资源路径、跨域这些细节不踩坑。
确保 Vue 项目配置适配生产环境
Vue CLI 项目默认使用 history 模式 路由，这要求后端（这里是 Nginx）对所有非资源请求都返回 index.html，否则刷新页面会 404。打包前先检查 vue.config.js：
-
publicPath 必须设为
/或相对路径（如./），避免部署到子目录时 JS/CSS 加载 404；若部署在https://example.com/myapp/，则设为/myapp/ - 确认
outputDir是你期望的构建输出目录（默认dist） - 不需要改 webpack 的 output.publicPath 为绝对 URL，Nginx 不处理构建时的 URL 逻辑
执行打包并验证本地静态文件结构
运行 npm run build（或 yarn build），生成 dist/ 目录。打开它，应看到：
-
index.html（唯一入口 HTML） -
assets/文件夹（含编译后的 JS、CSS、图片等） - 没有
node_modules、src或其他开发相关文件
可临时用 npx http-server dist -p 8080 启一个本地服务，访问 http://localhost:8080 和 http://localhost:8080/about（假设你有 /about 路由），确认页面能正常加载且路由跳转、刷新不报错——这是验证前端代码本身没问题的关键一步。
Nginx 配置要点：静态服务 + history 路由兜底
把 dist/ 目录整体复制到服务器（例如 /var/www/my-vue-app），然后编辑 Nginx 配置（如 /etc/nginx/conf.d/myapp.conf）：
server {
listen 80;
server_name example.com;
<pre class="brush:php;toolbar:false;">root /var/www/my-vue-app;
index index.html;
# 优先匹配静态资源（js/css/img 等），直接返回
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 所有其他请求（包括 /user、/admin 等前端路由）都指向 index.html
location / {
try_files $uri $uri/ /index.html;
}
}
-
root指向你的dist上级目录（即包含index.html的目录） -
try_files $uri $uri/ /index.html是 history 模式的核心：先找真实文件，再找目录，最后回退到index.html，让 Vue Router 接管 - 静态资源正则尽量覆盖常见类型，避免被
location /拦截导致缓存失效或 MIME 类型错误
重启 Nginx 并检查常见问题
执行 sudo nginx -t && sudo systemctl reload nginx，然后测试：
- 访问首页是否显示正常？检查浏览器开发者工具 Network 标签页，确认
index.html、JS、CSS 均为 200 - 点击路由跳转是否流畅？地址栏变化但无整页刷新
- 直接访问二级路由（如
https://example.com/user）是否仍显示页面？ 若 404，说明try_files没生效或root路径不对 - 控制台是否有
Failed to load resource？大概率是publicPath配置错误，导致 JS/CSS 请求路径错了
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
