- 很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后,会发现或多或少的问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题。
- 闲话少说,说一个页面出现空白的解决办法:
【修改index.js】:
修改config目录下的index.js,将assetsPublicPath: '/'改为assetsPublicPath: './',注意,有两处,都要改,不然打包部署到tomcat上面访问是一片空白;
【打包】:
项目文件目录下运行命令:npm run build,将项目打包好,然后当前项目目录下有一个dist文件夹,该文件夹下有一个index.html和static文件夹
【tomcat部署】:
现在,在tomcat的webapps文件夹下以项目名称新建一个文件夹,比如winter
文件夹,然后将index.html和static文件夹复制到winter
文件夹下,现在就可以启动服务器了,访问正常。
- 效果如下图: