将Vue项目部署到Tomcat服务器上(简单、粗暴)
1. 将项目打包
Vue中自带webpack,可以通过一行命令将项目打包
# 执行该命令打包
npm run build
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409110117737-1989987320.png)
2. 上传相应文件到服务器上
打包完成后,项目中会多出一个dist
文件夹, 这个文件夹中就包含html
、css
、js
等文件
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409110247913-490050204.png)
直接将dist
文件夹上传到Tomcat的ROOT目录下,默认情况下,访问服务器网址会自动定位到ROOT目录下的index.html
文件,如果是想要访问文件夹,原则上也放到这个目录就可以了,
当然,如果是war包则一定要放到webapps
目录下,tomcat会自动解压作为一个单独的项目
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409110609355-1094123281.png)
原则上我们就可以通过 http://ip地址/dist/index.html
来直接访问了,但是会有问题~~
3. 匹配路由
考虑与Vue项目中设置的路由前缀匹配,将dist
文件夹改个名字myspace
,这样我们在访问 http://ip地址/myspace/
的时候Vue中就会匹配myspace
前缀,会直接定位到项目首页,当然不配置也没关系,我们在访问资源的时候会直接跟在ip地址后面,感觉不太美观
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409111403786-681590059.png)
4. 页面显示错误
访问 http://ip地址/myspace/
控制台报错:
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409111501997-932031586.png)
可以看到是资源访问错误,原因是Vue项目中访问资源是绝对路径 /
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409111658543-330509186.png)
解决方法就是将项目中的js
目录和css
目录移动到ROOT目录下,和myspace
目录同级
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409111828702-2135472757.png)
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409111842953-1009574123.png)
5. 再次访问
再访问 http://ip地址/myspace/
,记得刷新一下缓存 快捷键 Ctrl + Shift + R
发现可以直接定位到项目首页,这样就把Vue路由前缀和ROOT
目录下的项目文件夹名myspace
统一起来了
![](https://img2023.cnblogs.com/blog/2935791/202304/2935791-20230409112216558-2058407176.png)
你只管出发,旅途自有风景~~