vue项目使用history路由模式打包部署过程

最新推荐文章于 2024-10-29 09:11:02 发布
原创 最新推荐文章于 2024-10-29 09:11:02 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何将Vue.js项目部署到Tomcat服务器上，并通过nginx进行代理设置，实现history模式路由。步骤包括：1. 使用Tomcat部署；2. 将dist目录放入Tomcat的webapps；3. 添加WEB-INF目录用于404重定向；4. nginx配置代理；5. 访问项目。

1、使用的tomcat部署 

2、将打包后的目录 dist 放到tomcat的webapp目录里面

3、在dist中添加WEB-INFO目录 做重定向 当404的时候 将dist中的 index.html页面作为错误页面返回

4、nginx代理 将 “IP:端口/dist” 代理成 “IP:端口”

5、访问 “IP：端口/” 就能访问部署后的vue的history路由模式的项目了

6、其它的服务器也都有自己的重定向的方式 

。。。

vue history 模式打包部署在域名的二级目录的配置指南
12-01
最近在做项目，需要把项目部署在域名下的二级目录，并且是在用vue-router的history 模式。 　我们都知道vue-router 的两种前端基本访问模式 hash 和history 。hash 模式后面带#，打包的时候只需要把绝对路径(/)换成...
vue-cli history模式实现tomcat部署报404的解决方式
10-16
其中，`history`模式是Vue Router的一种路由模式，它可以让应用的路由表现得更像传统的Web应用，使得URL无需包含哈希(`#`)符号，从而提供更好的用户体验。然而，当使用`history`模式并将应用部署到Apache、Nginx或...
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
vue在history模式下打包部署问题解决
爱学习的大雄的博客
03-01 2146
路由的hash模式与history模式打包时差异如下，hashpublicPath配置为./打包完成后可以直接运行dist包下的index.html且有界面显示部署时直接使用宝塔部署即可，无需配置其它historypublicPath配置为或项目在服务器根下路径打包完成后不可直接运行dist包下的index.html，必须要部署到服务器才行部署时还需要自己去配置nginx，实现服务端的映射。
vue3路由模式为history，打包后页面空白的处理方式
卫可冬的博客
04-06 8689
场景 vue-router 的 hash 模式时，url始终待着’#‘，如’http://localhost:8080/#/index.html’。 如果要去掉’#'号，那么就需要把 vue-router 的 hash 模式改为 history（html5）模式。 # vue3 const router = createRouter({ //hash 模式 // history: createWebHashHistory(), //html5 模式 history: createWeb
vue路由及打包部署
m0_61598337的博客
08-20 792
路由表主要记录hash（#号）与组件之间的对应关系。主要定义在router文件夹下的index.js},routes})若path值为/emp，则绑定的是../views/tlias/EmpView.vue，即为一条路由信息。Vue.use(VueRouter)使用vue路由，const routes = [{}]构建路由表，const router = new VueRouter({})实例化路由表对象。
vue项目双路由模式的多环境打包配置
u011004827的博客
12-18 1224
最近的项目需要配置双路由模式的多环境打包，在每个环境下直接执行命令行即可，无需每次打包前再去修改变量。 本次使用的vue-cli4，history模式下需要打包到xunjia目录下，且访问路径要携带xunjia/，hash模式直接是根路径。需要打包测试环境（history模式 + hash模式）和正式环境（history模式 + hash模式），为了开发运行方便也加了本地运行的两个模式的命令。 配置如下： 先加了几个env.[*] 文件， .env.development 本地运行的hash模式 .en
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
Vue项目打包部署与路由配置深度解析
最新发布
wujiayu31415的博客
10-29 1494
在Vue.js项目的开发和部署过程中，配置打包路径和路由模式是两个至关重要的环节。下面，我们将详细探讨如何根据需求将Vue项目打包部署到域名的根路径或二级路径，并深入解析hash路由与history路由的配置方法。和Vue Router，以及正确设置服务器端的代理规则，你可以轻松地将Vue应用部署到域名的根路径或二级路径，并自由选择使用hash路由或history路由。以Nginx为例，下面展示了如何为Vue项目配置Nginx以支持根路径和二级路径的部署。在Vue Router的配置中，将。
vue项目history模式打包部署及nginx配置(vue-cli4.0)
qq_34465778的博客
06-28 2089
vue.config.js中配置publicPath 配置为相对路径 ‘./’ ，这样即使项目不放在根目录下，也不会有找不到静态资源的情况 module.exports = { publicPath: './', } 一、打包部署到根路径 路由配置 export default new VueRouter({ mode: "history", routes }); 打包完成的代码放到nginx项目根目录my-project中，配置nginx：conf/nginx.conf location
vue项目部署到服务器加路由使用history模式
Ang-l
06-01 5729
第一步：打包vue项目 npm run build vue项目下回出现一个dist文件夹 将打包好的dist文件夹移动到你的服务器中 安装nginx并启动 下载安装包 cd /usr/local (切换路径) wget http://nginx.org/download/nginx-1.6.2.tar.gz (选择一个比较稳定的版本下载即可，或者手动下载后，用xshell传到该目录下也行) 解压安装 tar -zxvf nginx-1.6.2.tar.giz -C /usr/local (local这
Vue history路由模式配置及后台配置
优快云_Hss的博客
06-26 7699
项目根目录文件夹名称：rootFile 一：后台配置： 1、Nginx： location ~ ^/rootFile/ { root F:/XXX; try_files $uri $uri/ /rootFile/index.html; } 二：Vue配置： 1、文件 router.js将 mode 设置成 history 模式，并设置base：rootFile（...
vue history模式下面后端如何配置
sanlyshi's front-end road
01-02 7191
hash ——即地址栏URL中的#符号。 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。 history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持 history模式，会出现404 的情况，需要后台配置。 1、hash模式下，...
vue项目打包优化
qq_48666244的博客
11-07 576
第一步：在vue.config.js配置打包路径第二步：在router/index.js将路由模式改为hash如果项目上线要求是history模式，需要告诉后端重定向一下路径。
在tomcat中设置history模式，使vue-router使用history模式
sxs1995的博客
05-29 6613
vue-router文档中只有关于Apache，nginx等配置的说明，同过查询找到了以下方法解决tomcat下history模式的问题。 在web.xml中输入以下内容 <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:...
带路由的vue项目上传至服务器,vue history 路由模式打包发布到服务器设置
weixin_26965807的博客
08-06 279
要求描述路由设置路由配置js 设置 mode 为history ，这样会去掉#号 和正常的路由地址一样export default new Router({mode: 'history',routes: [{path: '/world', // 注意 路由的path 需要和页面的地址保持一致，即域名后的二级目录都得一样,否则会报错name: 'index',component: index},{p...
Tomcat部署Vue router History 模式
qq810646038的博客
01-28 4774
部署有两种方式： 访问地址为IP+端口，如 http://192.168.1.xx:8080，此时router形式为 http://192.168.1.xx:8080/user 访问地址为IP+端口+项目名，如 http://192.168.1.xx:8080/app，此时router形式为 http://192.168.1.xx:8080/app/user 一、IP+端口方式 需要修改Tomcat安装目录下的conf/server.xml，增加Context标签, 设置 docBase="/app"
Vue router history模式,404报错，在tomcat的配置
wangliuqi123的博客
12-13 1018
原文地址：https://www.wetsion.site/2018-09-21-vue-router-tomcat-config.html vue router在使用history时，部署时需要在服务器再进一步配置 vue中，router使用history模式，即mode: history，可以让项目在浏览器的地址显示和正常网页URL一样，不会出现/#/这样奇奇怪怪的东西， 但使用这种hi...
VUE history模式下tomcat设置进阶
ihuww的博客
12-13 745
支付宝打开VUE history模式的前端，出现404页面的另一种处理方法。使用tomcat的url重写来解决
Vue项目打包部署 history
09-08
Vue.js项目部署时使用`history`模式主要是为了实现单页应用（SPA）的无刷新导航。`history`模式允许前端直接操作URL，而不涉及服务器端路由。在Vue项目中配置`history`部署通常需要以下几个步骤： 1. **设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值