我正在建立一个网站使用Vue3，打字，Vue路由和VITE.这款应用程序托管在一台apache 网络服务器上.这个应用程序构建成功，并在我的本地计算机上按预期工作.
然而，当我将构建移动到生产服务器时，当页面重新加载时，它会中断，并出现以下错误:Uncaught SyntaxError: Invalid or unexpected token，这来自Vue构建的js文件.当我查看错误所在时，它不是人类可读的.此外，当此错误发生时，网页只显示一个空白屏幕.
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 file generated by vite个
<!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>
Image of the error code at the bottom and the blank page it produces个
到目前为止，我已经try 过了:
- 删除.htaccess文件以查看这是否会导致问题
- 按照类似票据中的建议将
<base href="/" />添加到index.html文件中 - 更改Vue路由历史记录以查看这是否是问题所在
- 在vite.config.ts中删除和添加基本路径选项
所有这些更改都不会对错误产生影响.
我对它进行了测试:
- Google Chrome
- 勇敢的
- 边缘
- Firefox-我得到一个略有不同的错误:未捕获语法错误:标识符紧跟在数字文字之后开始
我真的很感激任何帮助，因为我在这一个亏损.
先谢谢你