将Vue项目部署到Tomcat服务器上（简单、粗暴）

时间：2023-04-09 11:33:05浏览次数：60

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,ip,myspace,访问,文件夹,服务器,目录
From： https://www.cnblogs.com/junlin623/p/17300058.html

Vue常用指令
常用指令指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。常用指令指令作用v-bind为HTML标签绑定属性值，如设置href,css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素,判定为true时渲染,否则不......
html页面里面的button标签使用@click属性时，无法定位到Vue的method里面
问题解决就很离谱，都是按照网上的教程来的，一直无法定位，之后跟着加上了div标签，加上了id属性，方法还是灰白色，调用不了；后来直接将el属性名称更改掉了，没想到这样就成功识别到了，反正就是逻辑没有出问题，最后也达到期望值了。......
vscode 开发 vue3项目， src 别名为 @ ，报错
https://geekdaxue.co/read/me-note@vue/mydm8l需要设置basicURL然后就生效了{"compilerOptions":{//设置解析非相对模块名称的基本目录"baseUrl":".",//设置模块名到基于baseUrl的路径映射，可以设置路径别名的语法提示"paths":{"@/*......
vue2源码-一、rollup环境配置
npminit-y创建初始化package.json并修改script为"dev":"rollup-cw"安装rollup及其插件:npminstallrolluprollup-plugin-babel@babel/core@babel/preset-env--save-dev创建rollup.config.js对rollup进行配置：配置如下：importbabelfrom'rollup-plugin-bab......
记录-VueJs中如何使用Teleport组件
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助了解排序算法的优缺点和适用场景是非常重要的，因为在实际开发中，需要根据实际情况选择最合适的排序算法。不同的排序算法适用于不同的场景，有的算法适用于小规模的数据集，有的算法适用于大规模的数据集，有的算法适用于......
在Vue中使用键盘事件，回调函数被执行两次
暂时先不考虑v-for的key，查看下面的代码<template><div><form@submit.prevent="addTask"><span>请输入待办事项：</span><inputtype="text"placeholder="请输入..."v-model="text"@keyup.enter=&qu......
ES搜索框架--ES部署到Centos8服务器
参考：https://blog.csdn.net/Me_xuan/article/details/114608076https://www.cnblogs.com/chenxitag/p/12320868.html一、下载安装1.下载ES使用elasticsearch7.10.2，到官网下载对应的linux包，然后上传到服务器文件夹下，cd到文件夹后使用tar命令解压tar-xvfelasticsearch-7.10.2-linu......
Wow魔兽世界服务器搭建详细教程
自从《魔兽世界》国服关服后，很多魔兽老玩家心里都是空落落的，魔兽陪伴了我们十多年，此次关服犹如关上了通往艾泽拉斯大陆的大门。上帝关上了一扇门，我们也可以自己开扇窗，随着国服关闭，越来越多的玩家想要自己开服当服主，今天明杰将和你们分享魔兽世界服务器搭建教程。想要搭建一个魔兽商......
基于Ubuntu20.04搭建nfs服务器
准备一台Ubuntu虚拟机IP:192.168.129.114安装nfs-serversudoapt-getinstallnfs-kernel-server添加NFS共享目录sudovim/etc/exports添加一行*表示允许任何网段IP的系统访问该NFS目录/nfsroot*(rw,sync,no_root_squash)新建/nfsroot目录，并为该目录设置最......
vue-router传参问题
//字符串路径router.push('/users/eduardo')//带有路径的对象router.push({path:'/users/eduardo'})//命名的路由，并加上参数，让路由建立urlrouter.push({name:'user',params:{username:'eduardo'}})//带查询参数，结果是/register?plan=privat......