Nginx 部署 Vue 项目指南：配置独立端口虚拟主机托管内部系统-Nginx-PHP中文网

Vue项目构建后用Nginx托管最轻量稳定，推荐配置独立端口（如8081）和虚拟主机；需正确设置publicPath、root路径与try_files回退规则以支持history模式，确保/dist目录为root，避免404。

nginx 部署 vue 项目指南：配置独立端口虚拟主机托管内部系统

Vue 项目构建为静态文件后，用 Nginx 托管是最轻量、最稳定的方案之一。若该系统是内部使用（如后台管理、监控看板），推荐为其配置独立端口（如 8081）和专属虚拟主机，避免与主站端口冲突，也便于权限隔离和访问控制。

1. 构建 Vue 项目为静态资源

确保项目已正确配置 publicPath，尤其当不部署在根路径时：

若通过 http://localhost:8081/ 访问，vue.config.js 中设 publicPath: '/' 即可
若需子路径（如 /admin/），则设 publicPath: '/admin/'，并同步调整 Nginx location 路径
运行 npm run build，输出目录默认为 dist/，记下其绝对路径（如 /var/www/my-vue-app）

2. 配置 Nginx 独立端口虚拟主机

在 /etc/nginx/conf.d/ 下新建配置文件（如 internal-vue.conf），内容如下：

server {
    listen       8081;
    server_name  localhost;
<pre class="brush:php;toolbar:false;"># 防止浏览器缓存 HTML 导致路由刷新 404（对 history 模式关键）
location / {
    root   /var/www/my-vue-app;
    try_files $uri $uri/ /index.html;
}

# 静态资源缓存优化
location ~* \.(js|css|png|jpg|gif|ico|svg|woff2?)$ {
    root   /var/www/my-vue-app;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# 可选：限制仅内网访问
# allow 192.168.0.0/16;
# deny all;

}

保存后执行 sudo nginx -t && sudo systemctl reload nginx 生效。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

3. 处理 Vue Router history 模式 404 问题

Vue Router 默认使用 history 模式，依赖服务端对非 API 路径统一返回 index.html。上面配置中 try_files $uri $uri/ /index.html; 就是核心解决方式：

请求 /dashboard → 文件不存在 → 回退到 /index.html → 前端路由接管
务必确保 root 指向的是 dist 目录本身（不是其父级），否则 /index.html 会 404
如果用 alias 替代 root，注意末尾斜杠和路径拼接逻辑，容易出错，初学者建议坚持用 root

4. 安全与运维小贴士

面向内部系统，兼顾可用性与最小权限：

关闭服务器标识：server_tokens off; 加入 server 块
禁用不必要方法：if ($request_method !~ ^(GET|HEAD|POST|OPTIONS|PUT|DELETE)$) { return 405; }
日志单独记录：添加 access_log /var/log/nginx/vue-internal-access.log;
如需 HTTPS 内部互通，可用自签名证书或组织内 CA 签发，Nginx 中补充 ssl_certificate 和 ssl_certificate_key

不复杂但容易忽略细节——关键是构建路径、Nginx root 设置、以及 history 模式回退规则三者对齐。配好后直接访问 http://your-server-ip:8081 即可打开应用。