vue-cli部署到Tomcat上

首先配置项目中的config>index.js

这里面配置了webpack的生产环境和开发环境

这里要修改的是build对象下的属性

vue-cli部署到Tomcat上

这里主要修改assetsPublicPath(剩下的属性是干嘛的可以自行去webpack官网查看文档),这个属性是修改静态资源的根路径

一般来说是项目不会放在服务器的根路径 (网上有的说放到 ./ 就可以了,我只能说根据项目需要自行调整)

vue-cli部署到Tomcat上

然后修改router的路径

 

如果设置了mode:'history'就会出现一个问题

当你在浏览器地址栏进行URL拼接路由跳转的时候,会找不到静态文件(这个坑我还没有填上但是百度了一下要设置Tomcat,但是我设置以后也不管用,官方文档也没有给出Tomcat的解决方案,很纠结)最后还是妥协了,去掉了mode:‘history’和base属性虽然不好看,但是总比空白页强。

这个时候静态资源的路径配好了,如果现在打包会出现一个问题

vue-cli部署到Tomcat上

因为我们在开发环境中所有的静态资源都是在本地,上传到Tomcat以后就这里的路径就会出错,页面显示404找不到静态资源

所以我们要找到build->utils.js文件,新添加一个属性就可以了

vue-cli部署到Tomcat上

接下来就执行npm run build就可以了放到Tomcat上,然后运行Tomcat就可以了

有什么不对的希望大家指点