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服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决Vue.js由于延时显示了{{message}}引用界面的问题
今天小编就为大家分享一篇解决Vue.js由于延时显示了{{message}}引用界面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话，此篇文章会对你有所帮助的，需要的朋友可以参考下2018-05-05
Vue 提供了一个组件 component 标签来动态的完成组件的切换,本文就来详细的介绍一下Vue3动态组件Component,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-03-03
今天小编就为大家分享一篇Vue 实现复制功能,不需要任何结构内容直接复制方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
解决VueCil代理本地proxytable无效报错404的问题
这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下2024-02-02
Vue.js 是一个渐进式的JavaScript框架,广泛用于构建交互式用户界面,在 Vue 中,双向绑定是一项非常核心的概念,尤其是在处理表单输入时,它使得数据和用户界面之间的互动变得简单又高效,在本篇博客中,我们将深入探讨如何在 Vue 3 中实现表单输入的双向绑定2025-01-01
这篇文章主要介绍了VUE div click无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vue响应式系统之observe、watcher、dep的源码解析
这篇文章主要介绍了vue响应式系统之observe、watcher、dep的源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue实现登录功能的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论