将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文件,内容：<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>
- 禁止访问
- 监控设置
启用阿里云云监控，配置异常报警
引用说明
本文参考以下权威来源：
最后更新：2025年10月
作者：前端技术顾问（8年Vue项目部署经验）
声明经过真实环境测试，适用于阿里云共享虚拟主机经济版/豪华版。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/46578.html
