从Vue-CLI迁移到Vite后部署刷新页面出现语法错误求助

核心原因 #

这个问题本质是浏览器缓存了旧的静态资源或index.html，导致更新后用户刷新时，加载了过期的资源文件（比如旧的JS chunk），或者资源路径匹配错误，服务器返回了index.html内容当作JS解析，从而触发Uncaught SyntaxError: Unexpected token '<'。

具体解决措施 #

1. 确保Vite的资源哈希配置生效 #

Vite默认会给生产构建的静态资源加上哈希后缀，但要确认配置未破坏该机制：

• 在vite.config.js中显式指定哈希格式，确保资源更新后文件名自动变化：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]',
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js'
      }
    }
  }
})

文件名带哈希后，内容变化的资源会生成新文件名，浏览器会自动请求新资源，不会复用缓存的旧文件。

2. 配置服务器的缓存策略 #

核心是禁止浏览器缓存index.html，同时允许带哈希的静态资源长期缓存：

• 以Nginx为例，添加以下配置：

server {
  # 对index.html设置不缓存
  location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
  }

  # 对带哈希的静态资源设置长期缓存
  location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
}

其他服务器（Apache、Netlify等）同理，只需对应设置缓存规则即可。

3. 修正base路径配置 #

根据部署场景调整base参数：

• 若部署在域名子路径（如https://foo.bar/my-app），base设为'/my-app/'；
• 若用CDN托管静态资源，base设为CDN完整路径（如'https://cdn.foo.bar/'）；
• 避免直接将base设为域名根路径（https://foo.bar），除非是纯CDN托管场景。

4. 路由模式的服务器适配 #

若使用history模式前端路由，需确保服务器仅对路由路径（非静态资源）做index.html fallback：

• 避免将不存在的静态资源路径也返回index.html，否则旧缓存的无效资源请求会返回HTML内容，触发语法错误。

5. 兜底的版本检测方案 #

如果仍有用户缓存旧资源，可在应用中添加版本校验逻辑：

• 读取package.json的版本号，或请求后端版本接口，对比本地缓存的版本号，若不一致则提示用户刷新页面。

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