部署 Vue 项目到生产环境中，Nginx 是非常常见的选择！本文带你从零开始配置 Nginx，将 Vue 项目快速上线。🛠️💻

🎯 步骤 1：构建 Vue 项目

首先，确保你已经完成了 Vue 项目的开发，并且已经安装了 Vue CLI。

npm run build

执行此命令后，Vue 会生成一个 dist 目录，里面包含已经打包好的静态文件。

🎯 步骤 2：安装 Nginx

在你的服务器（例如 Ubuntu）上安装 Nginx：

sudo apt update
sudo apt install nginx

安装完成后，可以通过 nginx -v 来检查是否安装成功。确保 Nginx 正在运行：

sudo systemctl start nginx

🎯 步骤 3：配置 Nginx

接下来我们将 Nginx 配置成静态文件服务器，来托管 Vue 项目。找到 Nginx 的配置文件，通常位于 /etc/nginx/sites-available/default。编辑它：

sudo nano /etc/nginx/sites-available/default

将配置文件修改如下：

server {
    listen 80;
    server_name your_domain_or_IP;

    root /var/www/html/dist;  # 这里填写你 Vue 项目的 dist 目录路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://your_backend_api;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

📌 解释：

  • root：指定 Vue 项目打包后静态文件的位置（dist目录）。
  • try_files：这是 Vue Router 支持 history 模式的关键配置，它会将所有请求重定向到 index.html，从而保证前端路由正常工作。
  • location /api/：如果你有后端 API，使用代理转发请求给后端服务。

保存文件并退出。然后重新加载 Nginx 配置：

sudo systemctl restart nginx

🎯 步骤 4：将 Vue 项目上传到服务器

通过 SCP 或 FTP 等方式，将你本地的 dist 目录上传到服务器的 /var/www/html/ 目录下。

例如使用 SCP：

scp -r ./dist/ user@your_server_ip:/var/www/html/

🎉 部署完成！

现在你可以通过浏览器访问服务器的 IP 或域名，看看你的 Vue 应用是否已经成功上线！🚀( ´ ▽ ` )ﾉ

常见问题 🤔

  1. 404 错误？ 确保 location 配置正确，特别是 try_files 设置。
  2. 跨域问题？ 如果前后端分离，确保你在 Nginx 中配置了 /api/ 代理，并且你的后端允许跨域。