如何部署Vue项目到阿里云虚拟主机

当前位置：首页 > 虚拟主机 > 如何部署Vue项目到阿里云虚拟主机

详情介绍

将Vue项目通过 npm run build打包生成dist静态文件，使用FTP工具将dist文件夹内所有内容上传至阿里云虚拟主机的网站根目录（如htdocs），即可通过绑定的域名访问部署后的应用。

部署前准备工作

项目本地构建
在终端执行：
```
npm run build  # 或 yarn build
```
生成 dist 文件夹（包含静态文件 index.html、css、js 等）。
阿里云虚拟主机配置确认
- 登录阿里云控制台
- 记录以下关键信息：
  - FTP账号/密码（用于文件上传）
  - 主机IP地址
  - 网站根目录（通常为 /htdocs 或 /wwwroot）
环境兼容性检查
- 虚拟主机仅支持静态资源托管（不支持Node.js服务端运行）
- 若项目使用Vue Router的 history 模式，需提前配置伪静态规则（见第三节）。

上传文件到虚拟主机

方法1：通过FTP工具上传（推荐）

下载FTP客户端（如FileZilla、WinSCP）
输入主机IP、FTP账号、密码连接
将本地 dist 文件夹内所有文件拖拽至虚拟主机的网站根目录
️ 注意：不要上传整个 dist 文件夹,只传其内部文件。

方法2：通过阿里云控制台上传

进入主机管理面板 → 文件管理
上传ZIP压缩包到根目录 → 在线解压
（适用于大文件或网络不稳定场景）

关键配置项

解决Vue Router的history模式404问题

Apache环境（虚拟主机常用）
在根目录创建 .htaccess 文件,内容：

如何部署Vue项目到阿里云虚拟主机第1张

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx环境（部分主机支持）
联系阿里云客服或通过控制台修改Nginx配置,添加：
```
location / {
  try_files $uri $uri/ /index.html;
}
```

设置基础路径（非域名根目录时）

若项目部署在子目录（如 www.example.com/subdir/）：

修改 vue.config.js：

module.exports = {
  publicPath: '/subdir/'  // 与子目录名称一致
}

重新构建并上传文件

验证部署结果

访问域名（如 https://yourdomain.com）
按 F12 打开开发者工具，检查：
- 控制台无 404 或 500 错误
- 资源文件（JS/CSS）加载正常
- 路由跳转无页面刷新
测试API接口（如有）确保跨域配置正确（推荐后端配置CORS）

进阶优化建议

启用CDN加速
- 将静态资源上传至阿里云OSS，开启CDN缓存
- 修改 publicPath 为CDN地址，提升加载速度
配置HTTPS
- 在阿里云申请免费SSL证书 → 部署到虚拟主机
- 强制HTTP跳转HTTPS（通过 .htaccess）：
```
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
```
版本更新策略
- 每次更新后清除浏览器缓存（配置打包文件名哈希）
- 在 vue.config.js 中启用哈希命名：
```
module.exports = {
  filenameHashing: true // 默认开启
}
```

常见问题排查

问题现象	解决方案
空白页面	检查 `publicPath` 配置是否匹配根目录
路由跳转404	确认伪静态规则已生效
图片/字体加载失败	检查资源路径，使用绝对路径 `/img/logo.png`
接口跨域错误	后端配置CORS或使用代理

安全与维护

定期备份
通过阿里云控制台备份网站文件和数据库
隐藏敏感文件
- 禁止访问 .env 文件（在 .htaccess 添加）：
```
<Files ".env">
  Order Allow,Deny
  Deny from all
</Files>
```
监控设置
启用阿里云云监控，配置异常报警