vue3+vite使用History路由模式打包部署項目的步驟及注意事項
一、Vue Router 的兩種路由模式
哈希模式（Hash Mode）
默認(rèn)模式，URL 結(jié)構(gòu)包含哈希符號 #，例如：http://example.com/#/home。利用 window.location.hash 來跟蹤路由變化，瀏覽器會自動處理哈希的變化而不觸發(fā)頁面重載。
因為哈希值只影響瀏覽器的歷史記錄而不發(fā)送到服務(wù)器，所以無需后端配合即可實(shí)現(xiàn)前端路由。
SEO 性能較差，因為搜索引擎通常不會抓取哈希值后面的路徑內(nèi)容。
歷史模式（History Mode）
利用了 HTML5 的 History API，如 window.history.pushState() 和 window.onpopstate 事件。
在此模式下，URL 不包含哈希，呈現(xiàn)常規(guī)的路徑結(jié)構(gòu)，例如：http://example.com/home。
為了實(shí)現(xiàn)前進(jìn)、后退按鈕的正常工作以及防止直接訪問某個路由導(dǎo)致404錯誤，需要在服務(wù)器端進(jìn)行適當(dāng)?shù)呐渲?，將所有的請求都指向?yīng)用程序的入口文件，以便 Vue Router 能夠接管并解析正確的路由。
歷史模式提高了用戶體驗，URL 易于閱讀，也更利于 SEO。
二、History 路由模式打包部署項目
在Vue 3.中使用Vue Router的history模式進(jìn)行項目打包部署時，需要確保打包配置和服務(wù)器正確配置來處理路由。否則部署到Nginx會出現(xiàn)訪問404、空白等。在項目打包配置及Nginx配置有些要注意的地方。以項目名demo為例。
1、配置Vue Router為history模式，在src/router/index.js中配置
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes:[
// 定義路由
]
})
export default router備注：createWebHistory：history模式，createWebHashHistory：hash模式
2、配置 vite.config.js
import {
fileURLToPath,
URL
} from 'node:url'
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(() => {
return {
plugins: [
vue()
],
// 靜態(tài)站點(diǎn)根路徑配置；base:'/demo/';demo是項目名，解決Nginx部署時，訪問缺少項目前綴的問題
base: process.env.NODE_ENV === 'production' ? '/demo/' : '/',// vue-router中配置，組件匹配
// publicPath: process.env.NODE_ENV === 'production' ? '/demo/' : '/',// vue.config.js文件中配置，打包后外部資源的獲取
build: {
// 設(shè)置打包文件夾的名稱
outDir: 'demo'
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
};
});3、配置Nginx，在conf/nginx.conf中配置
location /demo/ {
alias /path/html/demo/;
index index.html index.htm;
try_files $uri $uri/ /demo/index.html;
}備注：alias /path/html/demo/; 中的 path 換成Nginx對應(yīng)的部署路徑
總結(jié)
到此這篇關(guān)于vue3+vite使用History路由模式打包部署項目的文章就介紹到這了,更多相關(guān)vue3+vite用History路由打包部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue2基本響應(yīng)式實(shí)現(xiàn)方式之讓數(shù)組也變成響應(yīng)式
這篇文章主要介紹了vue2基本響應(yīng)式實(shí)現(xiàn)方式之讓數(shù)組也變成響應(yīng)式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
CodeMirror是一個功能強(qiáng)大的Web代碼編輯器,廣泛應(yīng)用于各種Web應(yīng)用中,在Vue3項目中集成CodeMirror,可以顯著提升代碼編輯和展示的用戶體驗,本文將結(jié)合實(shí)際案例,詳細(xì)介紹在Vue3中使用CodeMirror插件的方法,需要的朋友可以參考下2024-12-12
本文主要介紹了Vue-Element-Admin前端接入SSO的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
本文主要探討了 Vue 3 中父子組件之間的通信方式,包括父傳子,通過props傳遞數(shù)據(jù)和方法；子傳父,用emit觸發(fā)自定義事件并傳遞數(shù)據(jù)；還介紹了使用ref直接操作子組件實(shí)例,借助defineExpose暴露子組件的屬性和方法給父組件,需要的朋友可以參考下2025-01-01
Vue2.0 http請求以及l(fā)oading展示實(shí)例
下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法
這篇文章主要介紹了關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法，實(shí)現(xiàn)方法有兩種，本文通過實(shí)例代碼對每種方法介紹的很詳細(xì)，需要的朋友參考下2018-12-12
php+vue3實(shí)現(xiàn)點(diǎn)選驗證碼功能
這篇文章主要介紹了php+vue3實(shí)現(xiàn)點(diǎn)選驗證碼,本文通過實(shí)例代碼給大家介紹的詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11