当前位置：首页 > 虚拟主机 > 正文

将Vue项目部署到虚拟主机

构建项目生成静态文件，上传至虚拟主机webroot，配置服务器重写规则，确保路由

构建Vue项目

  1. 运行构建命令
    在项目根目录执行： 

    npm run build

    生成的静态文件位于 dist 目录下，包含 index.html、css、js 等文件。

  2. 优化静态文件

    • 删除 dist/index.html 中多余的 <script> 标签（如 <script src="http://npm.taobao.org/...">），生产环境无需这些依赖。
    • 检查 assets 路径是否正确，确保资源文件能被正确加载。

上传文件至虚拟主机

  1. 使用FTP工具上传

    • 通过FTP客户端（如FileZilla）连接虚拟主机，将 dist 目录下的所有文件上传至虚拟主机的 public_html（或根目录）。
    • 确保 index.html 在根目录，且文件权限正确（通常设置为644或755）。

  2. 通过控制面板上传

    • 登录虚拟主机的cPanel或文件管理后台,进入 public_html 目录，上传 dist 文件夹内的所有文件。

配置服务器路由（解决刷新404问题）

若使用Vue Router的history模式，需配置服务器将所有请求重定向到index.html。

  1. 创建.htaccess文件
    在 public_html 目录下创建 .htaccess 文件，添加以下规则： 

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^.$ index.html [QSA,L]
</IfModule>
    • 作用：将所有请求（包括嵌套路由）重定向到 index.html，由前端路由处理。

  2. 验证配置
    访问域名时，输入深层路径（如 https://yourdomain.com/about），应正常显示页面，无404错误。

处理后端API（如需后端服务）

  1. 代理配置（开发环境）
    开发时可通过 vue.config.js 配置代理：

    %ignore_pre_3%

  2. 生产环境API地址

    • 修改代码中API的基础地址为公网IP或域名（如 axios.defaults.baseURL = 'https://api.yourdomain.com'）。
    • 确保API服务器允许虚拟主机的IP访问,且跨域配置正确（如CORS）。

绑定域名与配置HTTPS

  1. 绑定域名

    • 登录虚拟主机控制面板,进入“域名管理”或“附加域”，添加自己的域名并指向虚拟主机。
    • 修改DNS解析,将域名的A记录指向虚拟主机的IP地址。

  2. 申请SSL证书

    • 通过cPanel的“SSL/TLS”工具申请免费Let’s Encrypt证书，或手动上传已有证书。
    • 强制HTTP跳转HTTPS：在 .htaccess 中添加： 
      RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

常见问题与解决方案

问题 解决方案
刷新页面报404 确保 .htaccess 规则正确，且服务器支持URL重写（mod_rewrite模块启用）
静态资源加载失败 检查 publicPath 配置（vue.config.js中的 publicPath），确保资源路径正确
API跨域请求失败 在API服务器配置CORS，或使用Nginx反向代理（需主机支持）

相关问题与解答

问题1：虚拟主机不支持.htaccess怎么办？

解答：

  • 联系主机服务商确认是否支持URL重写规则。
  • 如果支持,确保 .htaccess 语法正确；如果不支持，需将项目改为Hash路由模式（mode: 'hash'），但URL会携带符号。

问题2：部署后页面提示“混合内容”错误（Mixed Content）？

解答：

  • 确保所有静态资源（JS、CSS、图片）均通过HTTPS加载。
  • 检查API请求是否为HTTP,若API未启用HTTPS，需调整为HTTPS或允许不安全请求（
3Vue项目部署虚拟主机
0

相关文章