nginx部署前端vue3项目

### 如何配置Nginx以部署Vue3单页应用(SPA)前端项目

#### 安装和启动Nginx
为了确保Nginx能够正常运行，在Linux环境下可以通过命令`sudo systemctl status nginx`来检查其状态[^1]。

#### 构建Vue3项目
构建Vue3项目以便生成用于生产的静态资源，这一步通过执行`npm run build`命令完成。此操作会创建一个名为`dist/`的目录，其中包含了所有必要的静态文件[^2]。

npm run build

#### 修改Nginx配置文件
接下来需要编辑或新建Nginx站点配置文件，通常位于`/etc/nginx/sites-available/default`或其他自定义位置。对于Vue SPA来说，重要的是设置正确的根路径指向之前提到的`dist/`目录，并处理HTML5模式下的历史记录API请求重定向至index.html：

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/dist; # 替换成实际vue项目的dist目录的位置
    
    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
}

这段配置使得任何未匹配到具体文件或目录的URL都将被导向至`index.html`，从而允许Vue Router接管路由逻辑[^3]。

#### 测试与重启Nginx服务
保存更改后的配置文件之后，先利用`nginx -t`指令验证新配置是否有误；如果一切顺利，则可通过`nginx -s reload`使新的配置生效而不中断现有连接。

sudo nginx -t
sudo nginx -s reload

#### 访问应用程序
最后，在浏览器里输入相应的域名或者服务器公网IP地址即可看到已经上线的Vue3应用。