宝塔部署vue

### 使用宝塔面板部署 Vue 应用 #### 安装宝塔面板 为了在服务器上使用宝塔面板管理资源，首先需要安装宝塔面板。以下是不同 Linux 发行版的安装命令： 对于 CentOS： ```bash yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec ``` 对于 Ubuntu 或 Deepin： ```bash wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec ``` 对于 Debian： ```bash wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ed8484bec ``` 对于 Fedora： ```bash wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh ``` 完成安装后，通过浏览器访问宝塔面板提供的初始登录地址，并按照提示设置管理员账户。 --- #### 配置环境 1. **安装 Nginx 和 PHP** 登录宝塔面板后，在软件商店中分别安装 Nginx 和 PHP（即使不直接使用 PHP 功能，也需要安装以便支持静态文件服务）。这一步可以通过图形化界面轻松实现[^1]。 2. **添加站点** 在宝塔面板左侧菜单栏选择“网站”，点击右上方的“添加站点”。输入绑定的域名或者 IP 地址，确认无误后提交创建请求。 --- #### 打包 Vue 项目 在本地开发环境中执行以下操作来准备可部署的生产版本代码： 1. 创建 `.env.production` 文件用于定义生产环境变量： ```plaintext VITE_APP_BASE_API='https://your-backend-api.com' ``` 2. 修改 `vite.config.js` 中的跨域代理配置： ```javascript export default { server: { proxy: { '/api': { target: 'https://your-backend-api.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }; ``` 3. 构建项目： ```bash npm run build ``` 此过程会生成一个名为 `dist` 的目录，其中包含了所有经过优化后的静态资源文件[^2]。 --- #### 将构建成果上传至服务器 可以采用多种方式将本地的 `dist` 文件夹传输到服务器指定路径下，比如 FTP 工具、SCP 命令或者其他第三方工具。 假设目标位置为 `/www/wwwroot/yourdomain.com`，则需确保该目录下的内容被替换为此处的内容。 --- #### 设置运行目录与伪静态规则 回到宝塔面板中的对应站点设置页，调整以下几个选项： 1. **基本设置 -> 运行目录** 更改为实际存放打包产物的位置，默认可能是根目录(`/`)，应更正为子级文件夹如 `/dist`[^1]。 2. **伪静态规则** 如果遇到路由模式问题(例如 history mode)，可以在“伪静态”标签里新增一段自定义 NGINX 规则： ```nginx location / { try_files $uri /index.html; } ``` 如果存在 API 路径映射需求，则还需额外增加类似下面这样的转发逻辑[^3]: ```nginx location /api { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://backend-server-ip:port/; } ``` 以上步骤完成后保存更改即可正常浏览已上线的应用程序。 ---