解決vite打包后白屏之router-view不生效問題

更新時間：2024年07月05日 15:41:49 作者：xiaban_

這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題發(fā)現(xiàn)

項目打包后白屏，最開始是在打包后的dist文件中的index.html中路徑爆黃

控制臺報錯找不到資源

簡單搜索后發(fā)現(xiàn)在vite.config.ts中配置base: "./"即可解決報錯問題

import {defineConfig, loadEnv} from 'vite'  
import vue from '@vitejs/plugin-vue'  
// @ts-ignore  
import path from 'path'  
  
export default defineConfig(({ mode }) => {  
  
return {  
	base: "./",  
	plugins: [  
		vue()  
	],  
	resolve:{  
			alias:{  
			// @ts-ignore  
			'@': path.resolve(__dirname, './src')  
			}  
		}  
	}  
})

控制臺沒報錯了，但是依舊是白屏

開了個新項目，打包后能夠正常使用，初步判定是路由的問題，然后在本項目的App.vue中加了123，發(fā)現(xiàn)打包后可以顯示123，但是還是不顯示其他的頁面

<script setup lang="ts">  
  
</script>  
  
<template>  
	<div>  
		123  
	<router-view/>  
	</div>  
</template>  
  
<style scoped>  
  
</style>

解決方案

最后搜索了router-view為什么不顯示，找到一篇文章說vite打包的項目需要在服務(wù)端環(huán)境才可以正常訪問，不能直接客戶端瀏覽器訪問

如果是vscode，可以下載live server模擬服務(wù)端環(huán)境，如果是webstorm，則可以右上角直接點開就是模擬服務(wù)端環(huán)境

但是結(jié)果還是白屏，后續(xù)發(fā)現(xiàn)是只有路由模式是history的情況下，router-view才會失效，改為hash模式就可以生效了。

import {createRouter, createWebHashHistory} from "vue-router";  
import pay from "@/page/pay.vue";  
  
const routes = [  
	{ path: '/', component: pay,redirect:"/pay" },  
	{ path: '/pay', component: pay }  
]  
  
const router = createRouter({  
	history: createWebHashHistory(),  
	// @ts-ignore  
	routes, 
})  
  
export default router;