Vue打包部署到Tomcat服务器

Vue打包部署到Tomcat服务器
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

我使用的是Vue-cli(simple)脚手架,目录结构更为简洁。
在这里插入图片描述
修改相关的配置,避免部署后常出现的空白页问题,而引起这个问题的根本原因是资源路径问题:
1.一个是index.html中的build.js路径问题;
2.一个是dist中静态资源路径问题。

在webpack.config.js中

加.,将绝对路径改为相对路径。
在这里插入图片描述

在index.html中

同样加.,改为相对路径。
在这里插入图片描述

打包

在控制台运行npm run build命令开始对项目进行打包,打包后生成dist目录。

部署

新建一个项目目录如:pahms,将新生成的dist目录和原项目文件中的index.html复制到pahms目录中,然后再将pahms目录放到tomcat的webapps目录下启动即可。

提示

在打包过程中最容易出现的问题就是路径问题,如果页面显示异常,可以打开浏览器的开发者调试工具,通过network查看加载失败的资源路径具体是怎样的,然后自己做出相应调整即可。

本文来源MrKorbin,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/25304

发表评论