Vue.js dist文件夹部署至虚拟主机子目录后无法渲染显示空白页

常见原因及修复步骤 #

1. 路由基础路径配置错误 #

SPA框架（Vue/React/Angular）默认以根路径(/)作为路由基准，部署到子目录时需手动指定base路径：

• Vue项目：在vue.config.js中设置publicPath：

  module.exports = {
    publicPath: '/sub-directory/'
  }
  

  重新执行npm run build后再部署。
• React项目：在package.json中添加homepage字段：

  "homepage": "/sub-directory/"
  

  或者在路由组件中设置basename：

  <BrowserRouter basename="/sub-directory">
    {/* 路由内容 */}
  </BrowserRouter>
  

• Angular项目：build时指定--base-href参数：

  ng build --base-href /sub-directory/
  

2. 服务器重写规则缺失 #

SPA需要将所有非文件/目录的请求重定向到index.html，虚拟主机需配置对应规则：

• Apache服务器：在子目录下创建.htaccess文件，内容如下：

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

• IIS服务器：在子目录下创建web.config文件，内容如下：

  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="SPA Route" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/sub-directory/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

3. 资源路径硬编码问题 #

检查index.html或项目代码中是否存在硬编码的根路径（如/static/css/main.css），需改为相对路径或使用框架提供的路径变量。确保build后生成的资源引用路径均带有子目录前缀。

4. 部署文件完整性与权限 #

• 确认/dist目录下所有文件已完整上传到虚拟主机的sub-directory子目录，无遗漏。
• 检查虚拟主机上文件权限，确保.html、.css、.js等文件具备可读权限（通常设置为644）。

内容的提问来源于stack exchange，提问作者RealNerd