vue3+vite使用History路由模式打包部署項目的步驟及注意事項
一、Vue Router 的兩種路由模式
哈希模式（Hash Mode）
默認(rèn)模式，URL 結(jié)構(gòu)包含哈希符號 #，例如：http://example.com/#/home。利用 window.location.hash 來跟蹤路由變化，瀏覽器會自動處理哈希的變化而不觸發(fā)頁面重載。
因為哈希值只影響瀏覽器的歷史記錄而不發(fā)送到服務(wù)器，所以無需后端配合即可實現(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。
為了實現(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)站點根路徑配置；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)文章
這篇文章主要介紹了vue3 自定義loading的操作方法,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue跳轉(zhuǎn)方式（打開新頁面）及傳參操作,結(jié)合實例形式分析了vue.js跳轉(zhuǎn)實現(xiàn)方式與參數(shù)接受相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
vue學(xué)習(xí)筆記五：在vue項目里面使用引入公共方法詳解
這篇文章主要介紹了在vue項目里面使用引入公共方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue基于Echarts的拖拽數(shù)據(jù)可視化功能實現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue基于Echars的拖拽數(shù)據(jù)可視化功能實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue3內(nèi)嵌iframe的傳參與接收參數(shù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3內(nèi)嵌iframe的傳參與接收參數(shù)的相關(guān)資料,Vue項目中使用iframe及傳值功能相信有不少人都遇到過,需要的朋友可以參考下2023-07-07
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，通過引入Vue-router對象模塊時配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細(xì)分析Vue路由History模式2023-06-06
Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下2024-01-01
Vue實現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實現(xiàn)圓環(huán)進(jìn)度條的示例，幫助大家更好的理解和使用前端框架進(jìn)行開發(fā)，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了Vue?Steam同款登錄驗證數(shù)字輸入框功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
最近小編接了一個新項目，項目需求要實現(xiàn)一個聊天功能，今天小編通過實例代碼給大家介紹vue cli使用融云實現(xiàn)聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04