快捷導(dǎo)航

vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng)

更新時(shí)間：2024年10月21日 08:34:23 作者：以夢爲(wèi)馬37

這篇文章主要介紹了vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng),配置過程包括在Vue項(xiàng)目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運(yùn)行,提升用戶體驗(yàn),需要的朋友可以參考下

一、Vue Router 的兩種路由模式

哈希模式（Hash Mode）

默認(rèn)模式，URL 結(jié)構(gòu)包含哈希符號(hào) #，例如：http://example.com/#/home。利用 window.location.hash 來跟蹤路由變化，瀏覽器會(huì)自動(dòng)處理哈希的變化而不觸發(fā)頁面重載。

因?yàn)楣Ｖ抵挥绊憺g覽器的歷史記錄而不發(fā)送到服務(wù)器，所以無需后端配合即可實(shí)現(xiàn)前端路由。
SEO 性能較差，因?yàn)樗阉饕嫱ǔ２粫?huì)抓取哈希值后面的路徑內(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)、后退按鈕的正常工作以及防止直接訪問某個(gè)路由導(dǎo)致404錯(cuò)誤，需要在服務(wù)器端進(jìn)行適當(dāng)?shù)呐渲茫瑢⑺械恼?qǐng)求都指向應(yīng)用程序的入口文件，以便 Vue Router 能夠接管并解析正確的路由。

歷史模式提高了用戶體驗(yàn)，URL 易于閱讀，也更利于 SEO。

二、History 路由模式打包部署項(xiàng)目

在Vue 3.中使用Vue Router的history模式進(jìn)行項(xiàng)目打包部署時(shí)，需要確保打包配置和服務(wù)器正確配置來處理路由。否則部署到Nginx會(huì)出現(xiàn)訪問404、空白等。在項(xiàng)目打包配置及Nginx配置有些要注意的地方。以項(xiàng)目名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是項(xiàng)目名，解決Nginx部署時(shí)，訪問缺少項(xiàng)目前綴的問題
		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對(duì)應(yīng)的部署路徑

總結(jié)

到此這篇關(guān)于vue3+vite使用History路由模式打包部署項(xiàng)目的文章就介紹到這了,更多相關(guān)vue3+vite用History路由打包部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: