Vue项目如何部署到Tomcat服务器上

1. 将项目打包

Vue中自带webpack，可以通过一行命令将项目打包

# 执行该命令打包
npm run build

2. 上传相应文件到服务器上

打包完成后，项目中会多出一个dist文件夹， 这个文件夹中就包含html、css、js等文件

直接将dist文件夹上传到Tomcat的ROOT目录下，默认情况下，访问服务器网址会自动定位到ROOT目录下的index.html文件，如果是想要访问文件夹，原则上也放到这个目录就可以了，
当然，如果是war包则一定要放到webapps目录下，tomcat会自动解压作为一个单独的项目

原则上我们就可以通过 http://ip地址/dist/index.html 来直接访问了，但是会有问题~~

3. 匹配路由

考虑与Vue项目中设置的路由前缀匹配，将dist文件夹改个名字myspace，这样我们在访问 http://ip地址/myspace/ 的时候Vue中就会匹配myspace前缀，会直接定位到项目首页，当然不配置也没关系，我们在访问资源的时候会直接跟在ip地址后面，感觉不太美观

4. 页面显示错误

访问 http://ip地址/myspace/

控制台报错：

可以看到是资源访问错误，原因是Vue项目中访问资源是绝对路径 /

解决方法就是将项目中的js目录和css目录移动到ROOT目录下，和myspace目录同级

5. 再次访问

再访问 http://ip地址/myspace/，记得刷新一下缓存 快捷键 Ctrl + Shift + R

发现可以直接定位到项目首页，这样就把Vue路由前缀和ROOT目录下的项目文件夹名myspace统一起来了

你只管出发，旅途自有风景~~

到此这篇关于将Vue项目部署到Tomcat服务器上（简单、粗暴）的文章就介绍到这了,更多相关Vue部署Tomcat服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！