webpack打包的vue项目部署在tomcat，页面不能加载的问题

1. vue项目部署在tomcat上首先用 npm run build 命令将前项目打包，如果没有改过打包文件的路径会在项目根目录下出现一个dist文件夹，这个文件夹就是项目的打包内容。
   
   
2. 将打包好的dist文件夹复制到tomcat的webapps文件夹下，然后运行bin目录下的startup.bat(linux下运行startup.sh)启动tomcat。在浏览器地址栏输入localhost:8080/dist 就可以看到了项目的首页，如果没有加载出首页：

1. F12打开控制台看一下Network,如果是有报404错误码则说明路径不对。

• 如果是/dist路径报错，打开dist文件夹看一下是不是有index.htmll文件，么有的话就需要改一下webpack.prod.config.js文件中的打包路径。
  然后重新打包部署。
• 如果/dist不报错而其他的js、css文件报错，一般就是index.html中的引入的js、css文件路径错误。
  这时候就需要将webpack.prod.config.js文件下的publicPatch为 ‘./’，如果是用webpack创建的项目没有改过可能项目结构不太一样，那要改的就是config目录下的index.js中assetPublicPath的值为’./’。
  然后重新打包部署。

2. 如果不是报路径错误，那就是讲的重点了…其实极有可能还是路径的错误(因为开发环境下如果跑起来没有错误，在生产环境也没有错误而页面不加载的问题一般都是路径的问题，反正我遇到的是这样)。想一想你的首页在路由中配置的是什么路径，是不是 / 咧，是的话问题就好解决了(我当初就是遇到的这个问题)，因为你给首页配置 / 的路径而项目要跑起来是要加上/dist(也就是打包放在webapps下的文件夹名称)，这样就起了冲突。如果直接用 / 路径 而不用 /dist 路径那访问的有是tom猫的首页，因为没有配置你项目的路径为 / 所以要在tomcat的conf目录下的server.xml文件中配置找到Host标签给它增加Context子标签 <Context docBase="…\webapps\dist" path="/" >。

• docBase="…\webapps\dist" ： 表示项目路径；
• path="/" ： 表示用 / 替换项目路径。

不知道你的问题解决了没有，解决了那很荣幸帮到你了，如果没有那很不幸你得继续找问题了，不过只要坚持找下去一定可以找到的。