vue打包部署到tomcat上页面空白资源加载不出来的解决

1.首先解决静态资源加载不出来的问题

vue3.0解决办法

需要在vue.config.js 添加 publicPath: ‘./’,

vue2.0解决办法

找到config目录下的index文件

将assetsPublicPath：‘/’改为assetsPublicPath：‘./’

做完第一步打包放到tomcat上 静态资源是可以加载出来了 但是页面会出现空白的情况

2.需要找到router文件夹找到index.js在里配置base

这里的路径要和tomcat配置的路径核对上

做完第二步 npm run build 生成dist目录将生产的dist目录放置到tomcat 里面的webapps目录里面此时需要修改dist文件名 名称对应的就是你base配置的路径名称 此刻对应的就是（webProject）

完成之后启动tomcat 访问localhost:8080/webProject就可以打开vue打包后的项目 端口对应的是tomcat的server.xml里面的端口

此时你会发现图片资源没有加载出来 这个是需要在build目录下的utils.js添加如下代码：

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',//部署时新增
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

添加的位置如下如的函数体里面：

总结

至此打包结束！！！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。