- vue项目部署在tomcat上首先用 npm run build 命令将前项目打包,如果没有改过打包文件的路径会在项目根目录下出现一个dist文件夹,这个文件夹就是项目的打包内容。
- 将打包好的dist文件夹复制到tomcat的webapps文件夹下,然后运行bin目录下的startup.bat(linux下运行startup.sh)启动tomcat。在浏览器地址栏输入localhost:8080/dist 就可以看到了项目的首页,如果没有加载出首页:
- 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的值为’./’。
然后重新打包部署。
- 如果不是报路径错误,那就是讲的重点了…其实极有可能还是路径的错误(因为开发环境下如果跑起来没有错误,在生产环境也没有错误而页面不加载的问题一般都是路径的问题,反正我遇到的是这样)。想一想你的首页在路由中配置的是什么路径,是不是 / 咧,是的话问题就好解决了(我当初就是遇到的这个问题),因为你给首页配置 / 的路径而项目要跑起来是要加上/dist(也就是打包放在webapps下的文件夹名称),这样就起了冲突。如果直接用 / 路径 而不用 /dist 路径那访问的有是tom猫的首页,因为没有配置你项目的路径为 / 所以要在tomcat的conf目录下的server.xml文件中配置找到Host标签给它增加Context子标签 <Context docBase="…\webapps\dist" path="/" >。
- docBase="…\webapps\dist" : 表示项目路径;
- path="/" : 表示用 / 替换项目路径。
不知道你的问题解决了没有,解决了那很荣幸帮到你了,如果没有那很不幸你得继续找问题了,不过只要坚持找下去一定可以找到的。