Vue3+Vite部署DreamHost后白屏及MIME类型错误求助

问题描述 #

Vue3+Vite项目部署到DreamHost主机，执行npm run build将dist文件上传至站点目录后，页面白屏，控制台报错：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec

本地npm run preview完全正常，已尝试清除浏览器缓存、调整vite build --base=./或vite build --base=/、对比新旧构建的index.html，均未解决问题。

主机目录结构：

mysite.com/
├── index.html
├── assets
└── .htaccess

核心原因 #

.htaccess中WordPress的重写规则覆盖了Vue SPA的路由规则，导致assets目录下的JS/CSS等静态资源请求被错误重定向到index.php，服务器返回HTML内容而非对应资源的正确MIME类型。

修复步骤 #

1. 重构.htaccess规则顺序与内容 #

修改.htaccess，确保静态资源优先被正确解析，同时区分WordPress和Vue的路由规则：

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
# 排除Vue静态资源目录，避免被WordPress规则拦截
RewriteCond %{REQUEST_URI} !^/assets/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

# BEGIN Vue SPA 路由规则
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  # 仅处理非文件、非目录且非WordPress相关的请求
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !^/wp-
  RewriteRule . /index.html [L]
</IfModule>
# END Vue SPA

# BEGIN WPSuperCache
# 保留原有缓存规则内容
# END WPSuperCache

关键改动：

• 在WordPress规则中添加RewriteCond %{REQUEST_URI} !^/assets/，让服务器优先处理assets目录下的静态资源
• 调整规则顺序，让WordPress先处理自身路由，再由Vue处理SPA页面路由

2. 确认Vite构建Base配置 #

从构建后的index.html可见，资源路径为绝对路径/assets/xxx，因此Vite配置中无需修改base参数，保持默认的/即可，确保资源请求路径正确。

3. 检查静态资源权限 #

登录DreamHost主机控制面板，确认assets目录权限为755，目录下的JS/CSS/字体文件权限为644，避免服务器因权限问题无法读取资源。

4. 清除服务器端缓存 #

DreamHost可能存在服务器级缓存，登录主机后台清除缓存，同时确保WPSuperCache不会缓存Vue的静态资源文件。

额外验证 #

打开浏览器DevTools的Network面板，查看JS/CSS文件的Response内容：

• 若返回的是正常的JS/CSS代码，说明规则生效
• 若仍返回HTML，需检查是否有其他插件或主机配置干扰重写规则

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