vue3+vite使用History路由模式打包部署项目的步骤及注意事项
一、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路由打包部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 地区选择器v-distpicker的常用功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了vue中常用的几种表单rules验证方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
CodeMirror是一个功能强大的Web代码编辑器,广泛应用于各种Web应用中,在Vue3项目中集成CodeMirror,可以显著提升代码编辑和展示的用户体验,本文将结合实际案例,详细介绍在Vue3中使用CodeMirror插件的方法,需要的朋友可以参考下2024-12-12
本文主要介绍了Vue-Element-Admin前端接入SSO的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
本文主要探讨了 Vue 3 中父子组件之间的通信方式,包括父传子,通过props传递数据和方法；子传父,用emit触发自定义事件并传递数据；还介绍了使用ref直接操作子组件实例,借助defineExpose暴露子组件的属性和方法给父组件,需要的朋友可以参考下2025-01-01
下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
这篇文章主要介绍了关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法，实现方法有两种，本文通过实例代码对每种方法介绍的很详细，需要的朋友参考下2018-12-12
这篇文章主要介绍了php+vue3实现点选验证码,本文通过实例代码给大家介绍的详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
最新评论