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路由打包部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3 自定义loading的操作方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了vue跳转方式（打开新页面）及传参操作,结合实例形式分析了vue.js跳转实现方式与参数接受相关操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要给大家介绍了关于vue3内嵌iframe的传参与接收参数的相关资料,Vue项目中使用iframe及传值功能相信有不少人都遇到过,需要的朋友可以参考下2023-07-07
Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式，本文将通过代码示例给大家详细分析Vue路由History模式2023-06-06
Vue.js 3.x 中的响应式数据ref 与 reactive详解
ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据：ref 与 reactive,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue实现圆环进度条的示例，帮助大家更好的理解和使用前端框架进行开发，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了Vue Steam同款登录验证数字输入框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
最近小编接了一个新项目，项目需求要实现一个聊天功能，今天小编通过实例代码给大家介绍vue cli使用融云实现聊天功能的方法，感兴趣的朋友跟随小编一起看看吧2019-04-04
最新评论