vue+ Tomcat 使用history模式打包后无法加载router

2023-07-04 06:18| 来源: 网络整理| 查看: 265

实际项目开发中，页面想去掉首页里#，便使用router history模式，但是打包后出现无法加载router-view，空白，点击任意链接无法找到文件。（后端服务器使用是Tomcat）

解决方式： 1. 修改Tomcat安装目录下的conf/server.xml，增加Context标签, 设置 docBase="/app" ，其中的app就是webapps目录下的项目名称（文件夹名）

在最后加上这句

注意这里

context指上下文，实际上就是一个web项目 path是虚拟目录，访问的时候用127.0.0.1:8080/aaa/*.jsp访问网页 docBase是网页实际存放位置的根目录，映射为path虚拟目录 reloadable="true"表示你修改了jsp文件后不需要重启就可以实现显示的同步

2. 配置路由router/index.js 里 base 属性

这里的 dist 和上文中的项目名称/文件夹名要保持一致

注意：设置好base之后，路由跳转的时候就会带上/dist前缀，比如path为/user路由，跳转过去就是http://192.168.1.xx:8080/dist/

3. 配置config/index.js

publicPath: './', // cc add // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', // assetsPublicPath: '/', //原来 4. 在Tomcat 项目下新建WEB-INF文件夹，接着在WEB-INF文件夹下新建 web.xml文件，

因为是history模式，要防止在路由下刷新变成404错误，这需要让tomcat都定位到首页，也就是index.html页。

Router for Tomcat 404 /index.html

服务端404时就去到index.html页，这样客户端的history模式路由就会生效

最终打包后的静态文件放在Tomcat下的webapps/app文件夹中，如下图

至此，浏览器输入IP+端口+项目名称就可以访问到项目了，亲测OK了！！！

参考：TomCat vue 环境部署 | RuoYi

【本文地址】

公司简介

联系我们