問題發(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打包的項目需要在服務端環(huán)境才可以正常訪問，不能直接客戶端瀏覽器訪問

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

但是結果還是白屏，后續(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;

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

補充

hash和history區(qū)別

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

Hash模式

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

優(yōu)點：

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

缺點：

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

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

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

History模式

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

優(yōu)點：

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

缺點：

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

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

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

結語

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論