Vue3生产环境页面刷新报Uncaught SyntaxError问题求助

我基于Vue3、TypeScript、Vue Router和Vite搭建的网站，本地构建、运行都正常，但部署到Apache服务器后，页面刷新时出现Uncaught SyntaxError: Invalid or unexpected token（Firefox下报错为Uncaught SyntaxError: identifier starts immediately after numeric literal），报错指向构建后的JS文件，代码不可读，页面直接空白。

已经尝试过但无效的操作：

• 删除.htaccess文件排查
• 在index.html中添加<base href="/" />
• 修改Vue Router的history模式
• 调整vite.config.ts中的base路径配置

项目相关配置信息如下：

Package.json #

{
  "name": "enigma-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-balloon": "^38.1.0",
    "@ckeditor/ckeditor5-build-balloon-block": "^38.1.0",
    "@ckeditor/ckeditor5-build-classic": "^38.1.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^38.1.0",
    "@ckeditor/ckeditor5-build-inline": "^38.1.0",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@fortawesome/free-regular-svg-icons": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/vue-fontawesome": "^3.0.5",
    "@fullcalendar/daygrid": "^5.11.3",
    "@fullcalendar/interaction": "^5.11.3",
    "@fullcalendar/list": "^5.11.3",
    "@fullcalendar/timegrid": "^5.11.3",
    "@fullcalendar/vue3": "^5.11.2",
    "@headlessui/vue": "^1.7.13",
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
    "axios": "^1.5.0",
    "chart.js": "^3.9.1",
    "dayjs": "^1.11.5",
    "dropzone": "^6.0.0-beta.2",
    "flat": "^5.0.2",
    "highlight.js": "^11.6.0",
    "js-beautify": "^1.14.6",
    "leaflet": "^1.9.3",
    "leaflet.markercluster": "^1.5.3",
    "litepicker": "^2.0.12",
    "lucide": "^0.90.0",
    "lucide-vue-next": "^0.95.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.23",
    "pinia-plugin-persistedstate": "^3.2.0",
    "simplebar": "^5.3.9",
    "tabulator-tables": "^5.3.4",
    "tiny-slider": "^2.9.4",
    "tippy.js": "^6.3.7",
    "toastify-js": "^1.12.0",
    "tom-select": "^2.2.0",
    "vue": "^3.3.4",
    "vue-router": "^4.1.6",
    "vue3-dropzone": "^2.1.2",
    "xlsx": "^0.18.5",
    "zoom-vanilla.js": "^2.0.6"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@types/dropzone": "^5.7.8",
    "@types/flat": "^5.0.2",
    "@types/js-beautify": "^1.13.3",
    "@types/leaflet": "^1.9.3",
    "@types/leaflet.markercluster": "^1.5.1",
    "@types/lodash": "^4.14.195",
    "@types/nprogress": "^0.2.3",
    "@types/tabulator-tables": "^5.4.8",
    "@types/toastify-js": "^1.11.1",
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "lodash": "^4.17.21",
    "postcss": "^8.4.25",
    "postcss-advanced-variables": "^3.0.1",
    "postcss-import": "^15.1.0",
    "postcss-nesting": "^12.0.0",
    "tailwind-merge": "^1.13.2",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.6",
    "vite": "^4.4.2",
    "vue-tsc": "^1.8.4"
  }
}

Vite.config.ts #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    commonjsOptions: {
      include: ["tailwind.config.js", "node_modules/**"],
    },
  },
  optimizeDeps: {
    include: ["tailwind-config"],
  },
  plugins: [vue()],
  resolve: {
    alias: {
        "tailwind-config": path.resolve(__dirname, "./tailwind.config.js"),
        "@": path.resolve(__dirname, "./src") 
      },
  },
  base: '/'
})

构建生成的Index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <base href="/" />
    <script type="module" crossorigin src="/assets/index-2c92196c.js"></script>
    <link rel="stylesheet" href="/assets/index-14613a76.css">
  </head>
  <body>
    <div id="app"></div>
    <div id="modal"></div>
  </body>
</html>

可行排查与解决方向 #

1. 检查Apache的gzip压缩配置 #

这种语法错误大概率是Apache开启了gzip压缩，而Vite构建时已经压缩过文件，双重压缩导致文件损坏。

可以在.htaccess中添加规则，排除已压缩的静态资源：

<IfModule mod_deflate.c>
  SetEnvIfNoCase Request_URI "\.(js|css|svg|png|jpg|gif)$" no-gzip dont-vary
</IfModule>

2. 验证构建文件完整性 #

把本地dist文件夹的文件和服务器上的部署文件对比，排查是否是文件传输过程中损坏（比如FTP没开二进制模式，导致二进制文件被转码）。

重新上传dist文件夹，务必使用二进制传输模式。

3. 调整Vite构建的压缩配置 #

暂时关闭Vite的内置压缩，避免和Apache的压缩冲突，修改vite.config.ts：

export default defineConfig({
  // ...其他配置
  build: {
    // ...其他build配置
    minify: false, // 先关闭压缩测试
    // 后续可尝试指定压缩方式：minify: 'terser'
  },
})

重新构建部署，若问题解决，再逐步调整压缩配置。

4. 修复Apache的MIME类型配置 #

确保Apache正确识别JS/CSS文件的MIME类型，错误类型会导致浏览器解析失败。在.htaccess中添加：

AddType application/javascript .js
AddType text/css .css

5. 排查第三方依赖兼容性 #

项目引入了大量第三方库，可能存在某个库在生产构建时出现兼容性问题。尝试逐步移除第三方依赖，重新构建部署，定位到具体问题库后，查看该库的部署文档或更新版本。

6. 确认Vue Router的base配置 #

如果网站部署在Apache子目录下，base路径需对应子目录；若部署在根目录，确保Vue Router的配置和Vite一致：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // ...路由规则
})

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