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

最新推荐文章于 2024-06-19 11:09:02 发布
最新推荐文章于 2024-06-19 11:09:02 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sukla/article/details/102731471
版权

1、使用的tomcat部署 

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

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

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

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

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

。。。

Sukla
关注
专栏目录
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
vue项目双路由模式的多环境打包配置
u011004827的博客
12-18 1112
最近的项目需要配置双路由模式的多环境打包，在每个环境下直接执行命令行即可，无需每次打包前再去修改变量。 本次使用的vue-cli4，history模式下需要打包到xunjia目录下，且访问路径要携带xunjia/，hash模式直接是根路径。需要打包测试环境（history模式 + hash模式）和正式环境（history模式 + hash模式），为了开发运行方便也加了本地运行的两个模式的命令。 配置如下： 先加了几个env.[*] 文件， .env.development 本地运行的hash模式 .en
vue-router路由history模式，hash模式，Nginx部署到非根目录
小蛇蛇的博客
06-19 334
【代码】vue-router路由history模式，hash模式，Nginx部署到非根目录。
在tomcat中设置history模式，使vue-router使用history模式
sxs1995的博客
05-29 6483
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 187
要求描述路由设置路由配置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 4145
部署有两种方式： 访问地址为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"
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
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 router history模式,404报错，在tomcat的配置
wangliuqi123的博客
12-13 915
原文地址：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 620
支付宝打开VUE history模式的前端，出现404页面的另一种处理方法。使用tomcat的url重写来解决
vue路由history模式部署到tomcat报404问题
wzp6010625的博客
09-18 2939
将vue项目打包后，放到tomcat上，刷新页面或者手动输入地址会报404 解决办法： 1. 项目在webapps的meizu-shop目录下 2. 在meizu-shop中新建文件夹WEB-INF，文件夹中新建web.xml 3. 配置web.xml，内容如下 <?xml version="1.0" encoding="ISO-8859-1"?> <web-ap...
vue 项目打包本地访问--history模式入坑
weixin_37347069的博客
12-05 6911
问题重现：vue2.x 版本router去掉url中#，即history模式，打包后,http-sever启动服务访问不出页面？ history模式的设置如下 const router = new Router({ mode: 'history', // 去掉url中的# ... }); http-sever启动服务 1、http-server安装及运行 2 、http-server...
tomcat对前端部署web应用的贡献--静态资源压缩和history路由模式的路径映射
reffrselom的博客
04-15 1273
关于tomcat的及静态资源压缩： 问题：vue工程打包后的app.js大小是2.3MB，请求时间过长 除了代码级别的打包优化外，tomcat竟然也能做出一些贡献， 如下是tomcat做出相应设置后的请求详细： 如上明显看出请求效率明显提升， 那我们是做了什么工作？怎么来理解呢？ 首先看鼠标hover时提示的这句话407KB transferred over network, resource...
vue cli2.0路由的hash模式和history模式的打包并查看本地效果的方法
mf_717714的博客
08-17 4602
1，如果路由是hash状态 首先打开项目文件夹。找到config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“ / ”，改为“ ./ ”。 如图 然后进行打包 npm run build 如果的到如下提示，不会报任何异常或错误， 如果想本地打开需要一个本地服务器，可以使用Hbuilder，或者安装本地服务。 首先确保是全局安装...
vue3对于路由vue-router进行加载优化、打包优化（懒加载、分包）
技术前端，忠于热爱 @回忆哆啦没有A梦
03-03 2274
vue3对于路由vue-router进行加载优化、打包优化（懒加载、分包），同时整个项目的性能优化。我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
webpack打包vue项目之后生成的dist文件该怎么启动运行
wangzhaoli0915的博客
03-16 2848
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。 此时我们直接在浏览器中打开...
vue history 路由模式打包发布到服务器设置
Aimee的博客
10-19 3977
要求描述 页面访问地址 首页：https://hello.haha.com/world 用户中心 ：https://hello.haha.com/world/user 路由设置 路由配置js 设置 mode 为history ，这样会去掉#号 和正常的路由地址一样 export default new Router({ mode: 'history', routes: [ { ...
vue项目部署到服务器加路由使用history模式
Ang-l
06-01 5619
第一步：打包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
最新发布
09-08
Vue.js项目部署时使用`history`模式主要是为了实现单页应用（SPA）的无刷新导航。`history`模式允许前端直接操作URL，而不涉及服务器端路由。在Vue项目中配置`history`部署通常需要以下几个步骤： 1. **设置HTML5 History API**: - 在你的`index.html`或主入口文件中添加 `<base>` 标签，指定应用程序的根路径，例如： ```html <base href="/" /> ``` 2. **配置Webpack**: - 使用Vue CLI的话，可以在`.vue-cli-service.config.js`中配置`routerMode`属性为`history`。如果手动配置，需要安装`vue-router`并配置`mode: 'history'`。 ```javascript module.exports = { // ...其他配置 configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.plugins.push(new HtmlWebpackPlugin({ hash: true, filename: '../dist/index.html', template: 'public/index.html', // 指定模板文件 minify: { removeComments: true, collapseWhitespace: true }, })) } config.devServer = { historyApiFallback: true, // 开启history fallback }; } }; ``` 3. **服务器配置**: - 在生产环境中，需要服务器支持`history`模式，通常意味着需要配置对所有非`'/index.html'`请求转发到`'/index.html'`。这依赖于你的服务器环境（如Express、Nginx等），你需要查阅相应的文档。 4. **处理浏览器兼容性和SEO**: - 对于旧版浏览器，可以使用`hashbang`（`#!`）代替`history`。现代浏览器一般能自动处理。 - 使用`prerender-spa-plugin`或类似工具预渲染静态页面，提升SEO。 **相关问题--:** 1. 如何解决Vue历史模式下刷新页面白屏的问题？ 2. 为什么要在生产环境中开启historyApiFallback？ 3. 怎么样让搜索引擎识别Vue的单页应用？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值