I've a Vue project buit with vite.
While debbuging the app, everything works ok.
But when i build it to production, and try to open it with preview, the chrome windows hangs loading forever.
Nothing is show on console. Is there anyway to capture the error?
Looks like it's stuck in a forever loop.
Edit
package.json
{
"name": "vue-project",
"version": "0.0.0",
"scripts": {
"dev": "npm run build:icons && vite --host --port 5050",
"build": "npm run build:icons && vue-tsc --noEmit && vite build",
"preview": "vite preview --port 5050",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint src -c .eslintrc.js --fix --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue,.tsx,.jsx",
"build:icons": "tsc -b src/@iconify && node src/@iconify/build-icons.js"
},
"dependencies": {
"@casl/ability": "^6.2.0",
"@casl/vue": "^2.2.0",
"@codemirror/highlight": "^0.19.8",
"@codemirror/lang-html": "^6.1.2",
"@codemirror/lang-javascript": "^6.1.0",
"@codemirror/lang-json": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/theme-one-dark": "^6.1.0",
"@floating-ui/dom": "1.0.0",
"@formkit/auto-animate": "^1.0.0-beta.3",
"@mdi/font": "^7.0.96",
"@vueuse/core": "^8.9.4",
"apexcharts-clevision": "^3.28.5",
"axios": "^0.27.2",
"axios-mock-adapter": "^1.21.2",
"buffer": "^6.0.3",
"chart.js": "^3.9.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"pinia": "^2.0.22",
"prismjs": "^1.29.0",
"sass": "^1.54.9",
"unplugin-vue-define-options": "^0.6.2",
"uuid": "^9.0.0",
"vue": "3.2.41",
"vue-chartjs": "^4.1.1",
"vue-codemirror": "^6.1.1",
"vue-flatpickr-component": "^10.0.0",
"vue-i18n": "^9.2.2",
"vue-prism-component": "^2.0.0",
"vue-router": "^4.1.6",
"vue3-apexcharts": "^1.4.1",
"vue3-perfect-scrollbar": "^1.6.0",
"vuetify": "^3.0.0",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@antfu/eslint-config-vue": "^0.25.2",
"@fullcalendar/core": "^5.11.3",
"@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",
"@iconify-json/mdi": "^1.1.33",
"@iconify/tools": "^2.1.0",
"@iconify/vue": "^3.2.1",
"@intlify/vite-plugin-vue-i18n": "^5.0.1",
"@types/lodash": "^4.14.186",
"@types/node": "^18.7.18",
"@types/uuid": "^8.3.4",
"@types/webfontloader": "^1.6.34",
"@typescript-eslint/eslint-plugin": "^5.38.0",
"@typescript-eslint/parser": "^5.38.0",
"@vitejs/plugin-vue": "^3.1.0",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"eslint": "^8.23.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-import-resolver-typescript": "^3.5.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-sonarjs": "^0.14.0",
"eslint-plugin-vue": "^9.5.1",
"postcss-html": "^1.5.0",
"stylelint": "^14.12.0",
"stylelint-config-idiomatic-order": "^8.1.0",
"stylelint-config-standard-scss": "^5.0.0",
"stylelint-use-logical-spec": "^4.1.0",
"type-fest": "^2.19.0",
"typescript": "^4.8.3",
"unplugin-auto-import": "^0.10.3",
"unplugin-vue-components": "^0.21.2",
"vite": "^3.2.2",
"vite-plugin-pages": "^0.27.1",
"vite-plugin-vue-layouts": "^0.7.0",
"vite-plugin-vuetify": "1.0.0",
"vue-tsc": "^1.0.9"
},
"packageManager": "[email protected]",
"resolutions": {
"postcss": "8",
"stylelint-order": "5",
"postcss-sorting": "^7.0.1"
}
}
output of build
╭─ ♥ 22:14 | E: code
╰─ npm run build
> [email protected] build
> npm run build:icons && vue-tsc --noEmit && vite build
> [email protected] build:icons
> tsc -b src/@iconify && node src/@iconify/build-icons.js
Bundled icons from E:\_Development\_repos\hiperstream\hiperstreamCloudPlatform\cloud-platform\code\node_modules\@iconify-json\mdi\icons.json
Saved src/@iconify/icons-bundle.js (2848016 bytes)
vite v3.2.2 building for production...
transforming (253) node_modules\vuetify\lib\composables\ssrBoot.mjs[plugin:vite:esbuild] Duplicate key "key" in object literal
50 | ? _withDirectives((_openBlock(), _createBlock(_resolveDynamicComponent(_unref(config).app.enableI18n ? 'i18n-t' : 'span'), _mergeProps({
51 | key: 0,
52 | key: "badge",
| ^
53 | class: ["nav-item-badge", __props.item.badgeClass]
54 | }, _unref(dynamicI18nProps)(__props.item.badgeContent, 'span')), {
✓ 1193 modules transformed.
dist/assets/avatar-1.aac046b6.png 15.96 KiB
dist/assets/avatar-2.0ae005f8.png 22.59 KiB
dist/assets/pose-f-28.a182fba0.png 9.21 KiB
dist/assets/pose-f-3.a3617bf1.png 8.31 KiB
dist/assets/mac-pc.4e376c3f.png 140.24 KiB
dist/assets/pose-f-39.43496c42.png 6.65 KiB
dist/assets/pose-m-14.a95cbb6a.png 5.87 KiB
dist/assets/pose-m-5.d7160542.png 6.80 KiB
dist/assets/pose-m-34.cb61966e.png 7.35 KiB
dist/assets/avatar-3.3ef9169b.png 11.57 KiB
dist/assets/avatar-4.406ee6ab.png 20.73 KiB
dist/assets/avatar-5.bad78850.png 18.35 KiB
dist/assets/avatar-6.3bc22d4b.png 18.22 KiB
dist/assets/avatar-7.8807e18e.png 18.07 KiB
dist/assets/avatar-8.942ae414.png 16.39 KiB
dist/assets/auth-v2-login-illustration-bordered-dark.1621a082.png 67.92 KiB
dist/assets/auth-v2-login-illustration-bordered-light.5efb7928.png 64.49 KiB
dist/assets/auth-v2-login-illustration-dark.c163247b.png 67.13 KiB
dist/assets/auth-v2-login-illustration-light.c910569c.png 68.40 KiB
dist/assets/paypal.8c1354c3.svg 2.24 KiB
dist/assets/illustration-1.20d12d31.png 12.84 KiB
dist/assets/illustration-2.042b082c.png 11.76 KiB
dist/assets/pose-fs-9.c6abbba4.png 28.74 KiB
dist/assets/sitting-girl-with-laptop-dark.aa688fe5.png 9.07 KiB
dist/assets/sitting-girl-with-laptop-light.bd520dbb.png 9.82 KiB
dist/assets/card-meetup.c5ffac4a.png 195.24 KiB
dist/assets/html5.ff3e7cf8.png 4.78 KiB
dist/assets/python.1d56c267.png 4.16 KiB
dist/assets/react.52bd27c0.png 5.31 KiB
dist/assets/vue.33fa8801.png 4.07 KiB
dist/assets/xamarin.d2086975.png 4.08 KiB
dist/assets/chrome.391a2294.png 7.47 KiB
dist/assets/american-express.2c04e485.png 8.14 KiB
dist/assets/knowledge-base-bg-dark.9e1eb36c.png 29.65 KiB
dist/assets/pricing-tree-1.61561baa.png 4.86 KiB
dist/assets/pricing-tree-3.7c67f762.png 5.59 KiB
dist/index.html 1.07 KiB
dist/assets/useGenerateImageVariant.ec010ed6.js 0.58 KiB / gzip: 0.27 KiB
dist/assets/VCard.b6709399.js 9.07 KiB / gzip: 2.06 KiB
dist/assets/VAlert.c1a0a22c.js 5.83 KiB / gzip: 1.70 KiB
dist/assets/webfontloader.b777d690.js 19.47 KiB / gzip: 5.78 KiB
dist/assets/VForm.45e996af.js 1.47 KiB / gzip: 0.61 KiB
dist/assets/VCheckbox.e52cedcf.js 1.67 KiB / gzip: 0.64 KiB
dist/assets/login.e1da9684.js 23.87 KiB / gzip: 8.25 KiB
dist/assets/blank.c23886c7.js 0.36 KiB / gzip: 0.24 KiB
dist/assets/VWindow.74c52ec5.js 9.08 KiB / gzip: 2.56 KiB
dist/assets/VWindowItem.f856cfbe.js 3.54 KiB / gzip: 1.11 KiB
dist/assets/VTabs.dffdacbb.js 20.22 KiB / gzip: 4.81 KiB
dist/assets/VTable.d527e358.js 1.56 KiB / gzip: 0.62 KiB
dist/assets/AppPricing.63e41703.js 14.20 KiB / gzip: 6.06 KiB
dist/assets/useInvoiceStore.3f404cbb.js 0.75 KiB / gzip: 0.36 KiB
dist/assets/sitting-girl-with-laptop-light.2ab0b492.js 0.25 KiB / gzip: 0.14 KiB
dist/assets/useLayoutsStore.7257820e.js 1.61 KiB / gzip: 0.62 KiB
dist/assets/VContainer.cf5a234e.js 0.52 KiB / gzip: 0.30 KiB
dist/assets/VTimelineItem.c57c8a72.js 7.16 KiB / gzip: 1.81 KiB
dist/assets/vue.runtime.esm-bundler.e5a66098.js 5.45 KiB / gzip: 1.89 KiB
dist/assets/index.21f4736b.js 42.20 KiB / gzip: 7.63 KiB
dist/assets/VTextarea.51d5864e.js 9.17 KiB / gzip: 2.56 KiB
dist/assets/_id_.30711c66.js 31.52 KiB / gzip: 4.48 KiB
dist/assets/index.aac33ec4.js 0.89 KiB / gzip: 0.46 KiB
dist/assets/index.9ba56bbe.js 28.73 KiB / gzip: 4.65 KiB
dist/assets/DefaultTabCrudLayout.vue_vue_type_script_setup_true_lang.c9f21d22.js 2.76 KiB / gzip: 0.97 KiB
dist/assets/DefaultCrudTabCardAccordionContentLayout.vue_vue_type_script_setup_true_lang.4411eb1b.js 5.70 KiB / gzip: 1.18 KiB
dist/assets/index.93a7da00.js 0.91 KiB / gzip: 0.47 KiB
dist/assets/VExpansionPanel.a3e74888.js 8.09 KiB / gzip: 2.00 KiB
dist/assets/pricing.3cf2db40.js 17.59 KiB / gzip: 2.80 KiB
dist/assets/Layout.vue_vue_type_script_setup_true_lang.59dd5321.js 39.91 KiB / gzip: 7.26 KiB
dist/assets/DefaultCrudTabCardAccordionContentLayout.a1cdd194.js 0.42 KiB / gzip: 0.23 KiB
dist/assets/faq.76ac9c5f.js 12.59 KiB / gzip: 2.88 KiB
dist/assets/DefaultCrudTabContentVCardLayout.ee966228.js 1.09 KiB / gzip: 0.51 KiB
dist/assets/DefaultVCardLayout.vue_vue_type_script_setup_true_lang.c0c59562.js 2.17 KiB / gzip: 0.78 KiB
dist/assets/DefaultLayoutWithHorizontalNav.fd6f082f.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/DefaultLayoutWithVerticalNav.e139d247.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/DefaultTabCrudLayout.df749d43.js 0.31 KiB / gzip: 0.18 KiB
dist/assets/NavBarI18n.8a521c1b.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/DefaultVCardLayout.dfa4f164.js 0.31 KiB / gzip: 0.17 KiB
dist/assets/NavBarNotifications.d9e7daac.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/NavbarThemeSwitcher.c87d20bf.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/UserProfile.8b5cee81.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/login.21c684c6.css 0.62 KiB / gzip: 0.26 KiB
dist/assets/VCardCrudTabContentLayout.abe161c0.js 1.66 KiB / gzip: 0.63 KiB
dist/assets/VAlert.12d954e1.css 4.68 KiB / gzip: 1.17 KiB
dist/assets/VCard.782c479c.css 6.74 KiB / gzip: 1.52 KiB
dist/assets/blank.21020790.css 0.06 KiB / gzip: 0.07 KiB
dist/assets/VCheckbox.de0921d5.css 0.13 KiB / gzip: 0.12 KiB
dist/assets/_tab_.960e3200.css 0.43 KiB / gzip: 0.24 KiB
dist/assets/VTabs.a70cd9cf.css 3.04 KiB / gzip: 0.82 KiB
dist/assets/VWindow.1bd1bd93.css 2.15 KiB / gzip: 0.51 KiB
dist/assets/EnableOneTimePasswordDialog.a42d412e.css 2.25 KiB / gzip: 0.63 KiB
dist/assets/AppPricing.61deeeed.css 0.06 KiB / gzip: 0.07 KiB
dist/assets/index.6b7aa9ad.css 0.46 KiB / gzip: 0.17 KiB
dist/assets/crm.95f00275.css 0.51 KiB / gzip: 0.31 KiB
dist/assets/VTable.4c8b70a0.css 5.63 KiB / gzip: 0.86 KiB
dist/assets/_id_.43495c33.css 0.43 KiB / gzip: 0.23 KiB
dist/assets/VTextarea.5dc8269a.css 1.36 KiB / gzip: 0.46 KiB
dist/assets/VTimelineItem.07999e79.css 16.35 KiB / gzip: 1.70 KiB
dist/assets/VExpansionPanel.da2668ed.css 6.40 KiB / gzip: 1.21 KiB
dist/assets/pricing.56987cf6.css 0.43 KiB / gzip: 0.25 KiB
dist/assets/faq.c2655a3e.css 0.37 KiB / gzip: 0.23 KiB
dist/assets/_id_.85426b33.css 0.53 KiB / gzip: 0.28 KiB
dist/assets/AppDateTimePicker.2e517c19.css 24.49 KiB / gzip: 3.87 KiB
dist/assets/_tab_.85a982d6.js 114.32 KiB / gzip: 17.83 KiB
dist/assets/EnableOneTimePasswordDialog.vue_vue_type_script_setup_true_lang.e28f045b.js 54.21 KiB / gzip: 26.72 KiB
dist/assets/AppDateTimePicker.vue_vue_type_style_index_0_lang.7a89fa00.js 102.95 KiB / gzip: 22.96 KiB
dist/assets/_id_.0d3c91dd.js 131.99 KiB / gzip: 24.15 KiB
dist/assets/index.60024895.css 440.04 KiB / gzip: 56.52 KiB
dist/assets/crm.b882faf7.js 723.03 KiB / gzip: 157.73 KiB
dist/assets/index.fc5e085d.js 4054.75 KiB / gzip: 978.41 KiB
output of preview
╰─ npm run preview
> [email protected] preview
> vite preview --port 5050
➜ Local: http://127.0.0.1:5050/
➜ Network: use --host to expose
The page on browser after build and preview
CodePudding user response：
You can't serve your vue build with live Server
This question is already Answered here How to run production site after build vue cli
CodePudding user response：
The problem was happening because, as I expected, the application was in a infinite loop.
The application firstly was using dynamic routes created using vite-plugin-pages
This was generating some problems during build, then I manually wrote the routes. Unfortunally I did forget to add the basic permissions to vue @casl
meta: {action:'read', subject:'Auth'},