一、白屏
原因一：
資源路勁問(wèn)題
修改：vite.config.ts
export default defineConfig({
plugins: [vue()],
// 打包路徑設(shè)置
base: process.env.NODE_ENV === 'production' ? './' : '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})原因二：打包后依舊打開(kāi)還是白屏：
原因是需要服務(wù)器進(jìn)行靜態(tài)資源訪問(wèn)，否則會(huì)因?yàn)榭缬蚨鴪?bào)錯(cuò)：
Access to script at 'file:///F:/Progremes/Vue3/yanxuan_vue3_m_h5/dist/assets/index-49de958d.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index.html:8 GET file:///F:/Progremes/Vue3/yanxuan_vue3_m_h5/dist/assets/index-49de958d.js net::ERR_FAILED
二、想要查看，可以裝一個(gè)本地服務(wù)泡一下就性：
安裝一個(gè)本地服務(wù)器插件
npm install http-server -g然后到 dist目錄下在cmd 中運(yùn)行文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-601018.html
http-server -p 8088
然后輸入地址訪問(wèn)就ok：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-601018.html
到了這里，關(guān)于vite打包vue3項(xiàng)目白屏報(bào)錯(cuò)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
