Vue3 Router：createWebHistory服务器端无法渲染<router-view>，Hash模式正常

核心原因 #

history模式依赖服务器配置，需要将所有路由请求（比如/about）转发到项目的index.html文件，否则直接访问子路由或刷新页面时，服务器会返回404，导致Vue Router无法正确加载对应组件，自然没有内容。而hash模式因为路由都带#，请求都会指向index.html，所以不受影响。

具体解决步骤 #

1. 修正Vite的base配置

如果你的项目部署在DreamHost的子目录（比如https://websiteurl.com/folder/），必须正确设置base路径：
打开vite.config.js，修改base字段：

export default defineConfig({
  plugins: [vue()],
  base: "/folder/",  // 替换成你的实际子目录路径，根目录则设为"/"
  // 其他配置...
});

注意：base必须以/开头和结尾，否则资源路径会出错。

2. 添加Apache重写规则（.htaccess文件）

DreamHost默认使用Apache服务器，在你的项目部署根目录（即存放index.html的目录）创建.htaccess文件，写入以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /folder/  // 子目录填这个，根目录改为"/"
  RewriteRule ^index\.html$ - [L]
  # 如果请求的不是文件或目录，转发到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /folder/index.html [L]  // 子目录对应修改，根目录改为"/index.html"
</IfModule>

确保DreamHost开启了mod_rewrite模块（一般默认开启，若没开可联系客服）。

3. 重新打包并部署

执行npm run build生成最新的dist文件，将dist目录下的所有文件上传到DreamHost对应目录（子目录或根目录）。

排查验证 #

• 打开浏览器控制台，检查是否有404错误：如果是资源路径错误，说明base配置不对；如果是路由页面404，说明.htaccess规则没生效。
• 直接访问https://yourdomain.com/folder/about，确认是否渲染About组件。

内容的提问来源于stack exchange，提问作者Eric.18