使用宝塔面板中的Nginx部署前端Vue项目

### 宝塔面板 Nginx 部署 Vue3 前端项目教程 #### 1. 准备工作 在开始部署之前，确保已完成以下准备工作： - 已经拥有一台已安装 Linux 系统的云服务器。 - 使用 `npm` 或 `yarn` 对 Vue3 项目进行了打包操作。可以通过运行以下命令生成 `dist` 文件夹： ```bash npm run build ``` 此过程会将 Vue3 庢目打包为生产环境可用的静态资源文件[^5]。 #### 2. 安装宝塔面板 登录到您的云服务器并安装宝塔面板（Linux 版本），具体安装方式可以参考官方文档。以下是常用的安装脚本： ```bash yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ``` 完成后，通过浏览器访问宝塔面板，默认地址为 `http://<your_server_ip>:8888` 并设置初始密码[^1]。 #### 3. 添加站点 在宝塔面板中点击左侧导航栏的 **网站** -> **添加站点**，输入您希望绑定的域名（如 `example.com`）。如果尚未购买域名，可以直接使用 IP 地址测试。 选择 PHP 版本时，请选择 **纯静态**，因为 Vue3 是单页应用 (SPA)，并不依赖于动态后端语言[^4]。 #### 4. 修改根目录路径 默认情况下，新创建的站点根目录位于 `/www/wwwroot/<domain>`。为了使 Vue3 的 SPA 渲染正常，需将其更改为 `dist` 文件所在的路径。假设 `dist` 文件已被上传至该目录，则需要调整为子目录形式，例如 `/www/wwwroot/example.com/dist`。 #### 5. 上传打包后的文件 将本地生成的 `dist` 文件夹压缩并通过 FTP/SFTP 协议或者直接利用宝塔内置的文件管理工具上传到服务器上的对应位置。推荐上传到 `/www/wwwroot/<domain>/dist` 中[^5]。 #### 6. 设置伪静态规则 由于 Vue Router 默认采用的是 HTML5 History 模式，在刷新页面或直接访问某些路由链接时可能会遇到 404 错误。因此需要配置 Nginx 的伪静态规则支持前端路由重定向： 编辑当前站点的配置文件，添加如下内容： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这一步骤非常重要，它告诉 Nginx 当请求未匹配任何实际存在的文件时返回 `index.html` 页面[^5]。 #### 7. 测试 SSL 和 HTTPS 为了让用户体验更加安全可靠，建议启用 HTTPS 访问。可以在宝塔面板中轻松实现这一目标——只需前往 **SSL** 标签页申请 Let's Encrypt 免费证书，并一键开启强制 HTTPS 跳转功能即可[^2]。 --- ### 注意事项 - 若发现无法加载资源，请确认 `dist` 文件内的相对路径是否正确；必要时可通过修改 `publicPath` 参数解决。 - 如果存在跨域问题，还需额外配置 CORS 头部信息[^4]。 ---