如何在Nginx部署的VPS上渲染.vue文件？

.vue单文件组件是Vue的开发专属格式，浏览器无法直接解析，必须通过构建工具（比如Webpack，Vue CLI底层基于它）编译成浏览器能识别的静态HTML/CSS/JS文件，之后再部署到Nginx上。下面分两种场景给出操作步骤：

一、推荐：本地构建后上传到VPS（节省VPS资源） #

1. 本地准备环境
   • 确保本地安装了Node.js和npm（或yarn），没有的话直接去官网下载安装即可。
   • 打开终端进入本地Vue项目的根目录，安装项目依赖：

     npm install
     

2. 构建静态文件
   • 执行构建命令生成生产环境的静态资源：

     npm run build
     

     执行完成后，项目根目录会出现一个dist文件夹，里面就是可直接部署的静态文件包。
3. 上传到VPS
   • 用scp命令把dist文件夹传到VPS的Nginx网站根目录（比如默认的/var/www/html，或者你自定义的路径）：

     scp -r dist/ your-vps-user@your-vps-ip:/var/www/html/
     

     也可以用FileZilla等FTP工具上传，操作更直观。

二、直接在VPS上构建（适合无法本地构建的场景） #

1. VPS上安装Node.js环境
   • 以Debian/Ubuntu系统为例，执行以下命令安装Node.js和npm：

     sudo apt update && sudo apt install nodejs npm
     

     若需要特定版本的Node.js，推荐用nvm安装，避免版本兼容问题。
2. 上传项目代码到VPS
   • 如果项目托管在Git仓库，直接在VPS上克隆：

     git clone your-project-git-url
     

     也可以用scp或FTP上传整个项目文件夹。
3. 安装依赖并构建
   • 进入项目根目录，安装依赖：

     npm install
     

   • 执行构建命令生成dist文件夹：

     npm run build
     

三、配置Nginx指向静态资源 #

1. 编辑Nginx配置文件
   • 打开你的域名配置文件（比如/etc/nginx/sites-available/your-domain.conf），添加或修改如下server块：

     server {
         listen 80;
         server_name your-domain.com; # 替换成你的域名
     
         root /var/www/html/dist; # 替换成dist文件夹的实际路径
         index index.html;
     
         # 处理SPA路由刷新404的问题
         location / {
             try_files $uri $uri/ /index.html;
         }
     
         # 静态资源缓存优化（可选）
         location ~* \.(js|css|png|jpg|svg|ico)$ {
             expires 1y;
             add_header Cache-Control "public, immutable";
         }
     }
     

2. 验证配置并重启Nginx
   • 检查配置文件是否有语法错误：

     sudo nginx -t
     

   • 验证通过后重启Nginx：

     sudo systemctl restart nginx
     

注意事项 #

• 确认Nginx的运行用户（通常是www-data）对dist文件夹有读取权限，若没有则执行：

  sudo chown -R www-data:www-data /var/www/html/dist
  

• 确保你的域名已经解析到VPS的公网IP，并且VPS开放了80端口（若配置HTTPS还需开放443端口）。
• 查看package.json里的scripts字段，确认构建命令是否为npm run build，旧版本Vue项目可能是npm run build:prod。

内容的提问来源于stack exchange，提问作者Guts