首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+vite用History路由打包部署

vue3+vite使用History路由模式打包部署项目的步骤及注意事项

2024-10-21 08:34:07 作者：以夢爲馬37

这篇文章主要介绍了vue3+vite使用History路由模式打包部署项目的步骤及注意事项,配置过程包括在Vue项目中设置路由模式、调整打包配置以及Nginx服务器的配置,正确的部署配置能够确保应用顺利运行,提升用户体验,需要的朋友可以参考下

一、Vue Router 的两种路由模式

哈希模式（Hash Mode）

默认模式，URL 结构包含哈希符号 #，例如：http://example.com/#/home。利用 window.location.hash 来跟踪路由变化，浏览器会自动处理哈希的变化而不触发页面重载。

因为哈希值只影响浏览器的历史记录而不发送到服务器，所以无需后端配合即可实现前端路由。
SEO 性能较差，因为搜索引擎通常不会抓取哈希值后面的路径内容。

历史模式（History Mode）

利用了 HTML5 的 History API，如 window.history.pushState() 和 window.onpopstate 事件。

在此模式下，URL 不包含哈希，呈现常规的路径结构，例如：http://example.com/home。

为了实现前进、后退按钮的正常工作以及防止直接访问某个路由导致404错误，需要在服务器端进行适当的配置，将所有的请求都指向应用程序的入口文件，以便 Vue Router 能够接管并解析正确的路由。

历史模式提高了用户体验，URL 易于阅读，也更利于 SEO。

二、History 路由模式打包部署项目

在Vue 3.中使用Vue Router的history模式进行项目打包部署时，需要确保打包配置和服务器正确配置来处理路由。否则部署到Nginx会出现访问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()
		],
		// 静态站点根路径配置；base:'/demo/';demo是项目名，解决Nginx部署时，访问缺少项目前缀的问题
		base: process.env.NODE_ENV === 'production' ? '/demo/' : '/',// vue-router中配置，组件匹配
		// publicPath: process.env.NODE_ENV === 'production' ? '/demo/' : '/',// vue.config.js文件中配置，打包后外部资源的获取
		build: {
			// 设置打包文件夹的名称
			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对应的部署路径

总结

到此这篇关于vue3+vite使用History路由模式打包部署项目的文章就介绍到这了,更多相关vue3+vite用History路由打包部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！