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

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

控制臺報(bào)錯(cuò)找不到資源

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

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')  
			}  
		}  
	}  
})

控制臺沒報(bào)錯(cuò)了，但是依舊是白屏

開了個(gè)新項(xiàng)目，打包后能夠正常使用，初步判定是路由的問題，然后在本項(xiàng)目的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打包的項(xiàng)目需要在服務(wù)端環(huán)境才可以正常訪問，不能直接客戶端瀏覽器訪問

如果是vscode，可以下載live server模擬服務(wù)端環(huán)境，如果是webstorm，則可以右上角直接點(diǎn)開就是模擬服務(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;

值得注意的是，如果不模擬服務(wù)端環(huán)境，直接在文件訪問，還是會報(bào)錯(cuò)

補(bǔ)充

hash和history區(qū)別

簡單來說就是hash模式就是路徑中帶#的，history模式就是路徑中不帶#號

Hash模式

Hash 模式是通過監(jiān)聽 URL 中的 hash 值( # 及其后面的部分)來實(shí)現(xiàn)路由切換和組件渲染的。

優(yōu)點(diǎn)：

• 兼容性好,支持所有瀏覽器,包括不支持 HTML5 History API 的老舊瀏覽器。
• 服務(wù)端無需做特殊配置。

缺點(diǎn)：

• URL 中有 # 號，不太美觀。
• 部分老舊的瀏覽器可能會有效率問題。

Hash模式路由實(shí)現(xiàn)原理

在 hash 模式下，路由的實(shí)現(xiàn)主要依賴于 URL 的 hash 部分（即#后面的部分）。

History模式

History 模式利用 HTML5 History API 中的 pushState 和 replaceState 方法來實(shí)現(xiàn) URL 的導(dǎo)航，無需 # 號。

優(yōu)點(diǎn)：

• 更加美觀,看起來像標(biāo)準(zhǔn)的網(wǎng)站鏈接。
• 符合 HTML5 標(biāo)準(zhǔn)，支持瀏覽器的前進(jìn)/后退按鈕。

缺點(diǎn)：

• 部分老舊的瀏覽器不支持 HTML5 History API，需要使用墊片庫(Polyfill)來支持。
• 需要在服務(wù)端做特殊配置，確保所有的 URL 都能找到應(yīng)用入口文件(例如 index.html)，否則會出現(xiàn) 404 錯(cuò)誤。

History模式路由實(shí)現(xiàn)原理

在history模式下，路由的實(shí)現(xiàn)主要依賴于HTML5的History API。

結(jié)語

如果是實(shí)在想要history模式的，可以在本地打包完需要測試的，改為hash模式后，用live server插件或者直接webstorm打開即可成功測試，準(zhǔn)備部署后再修改為history模式

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論