Vue.js 项目打包部署到Tomact服务器

最新推荐文章于 2025-11-06 10:29:16 发布
原创 最新推荐文章于 2025-11-06 10:29:16 发布 · 583 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何将Vue.js项目打包并部署到Tomcat服务器的步骤，包括npm run build生成dist文件，安装Tomcat，配置端口号，启动Tomcat服务器，以及通过/dist虚拟目录访问应用。建议采用将dist文件放在webapps目录下直接访问的方法。

第一步：

第二步：终端运行  npm  run build,会生成dist文件

第三步：安装Tomact

可能遇到的问题：

将生成好的dist文件放在tomact的webapps文件下

第四步（端口号不冲突可以忽略）：为了防止端口号冲突，可以对端口号进行修改（打开conf文件夹）

最低0.47元/天 解锁文章
Vue.js 打包和部署到服务器的流程
CoderExtra的博客
09-27 308
Vue.js 是一种流行的前端框架，它提供了一种简洁的方式来构建交互式的用户界面。一旦你完成了 Vue.js 应用程序的开发，你可能需要将它打包并部署到服务器上，以便可以通过互联网访问。本文将介绍如何将 Vue.js 应用程序打包并部署到服务器的流程。
使用Vue.js在Tomcat上运行的方法
PixelNinja的博客
09-30 691
Vue.js是一种流行的JavaScript框架，用于构建现代化的用户界面。然而，如果你想要在Tomcat服务器上运行Vue.js应用程序，你需要一些额外的步骤来配置你的环境。这些是在Tomcat上运行Vue.js应用程序的基本步骤。通过按照上述步骤操作，你可以成功地将Vue.js应用程序部署到Tomcat服务器上。注意：在运行Vue.js应用程序之前，请确保已经正确安装和配置了Node.js、Vue CLI和Tomcat服务器。来查看部署在Tomcat上的Vue.js应用程序。创建Vue.js应用程序。
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
m0_67392126的博客
07-30 1万+
想必大家都知道，vue项目npmrunbuild会直接生成一个dist文件(文件夹)，对吧，那么对于生成的dist文件夹，这怎么发布到服务器啊？就很懵。今天呢，bug菌我就带着大家来揭开这层谜团，手把手教大家如何将vue打包生成的dist文件夹并发布到服务器能被正常访问。...
Linux使用tomcat发布vue打包的dist或html
最新发布
博客
11-06 963
Linux使用tomcat发布vue打包的dist或html
Vue项目打包部署到Tomcat
m0_52789121的博客
04-11 2165
一、 使用 npm run build打包完成之后会出现一个dist文件夹，里面有static文件夹和一个index.html文件，一般我们部署在tomcat上面会将文件放在webapps文件夹下 如果不进行任何修改将dist文件夹放进去的话，会出现资源路径错误的问题，因为config文件夹下index文件build默认的 assetsPublicPath:“/”，除非部署的时候将dist文件里的文件放在webapps下，这样就很不科学，那我们如何解决这个问题呢 修改config文件夹下index文件中的
tomcat启动vue项目
jockha的博客
10-29 2259
1.vue配置设置 vueTemp\vue.config.js中： publicPath: process.env.NODE_ENV === “production” ? “/dist” : “./”, outputDir: “dist”, // ‘dist’, 生产环境构建文件的目录 assetsDir: “static”, // 相对于outputDir的静态资源(js、css、img、fonts)目录 2.打包 npm run build 3.把打包好的项目放到tomcat的D:\worktool\a
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
vue项目打包部署到tomcat（详细）
蜗牛~~
06-21 6487
hash路由模式打包部署到tomcat 1、修改config/index.js文件下的assetsPublicPath为'./' 2、修改router文件夹下index.js添加 base: ‘/文件夹名称/’ （例如：yuncheng，可以自己随意设置） 3、在tomcat下webapps里面新建一个文件夹，名称是之前配置时设置的名称（yuncheng） 4、将自己打包的dist文件夹的内容放进tomcat下的webapps的yuncheng文件夹下 注意：2.3.4可以简化为：在...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
在开发Vue.js应用程序时，通常会使用Webpack进行模块打包，以便于部署到各种服务器环境，如Apache、Nginx或Tomcat。然而，在部署到Tomcat时，由于Vue.js使用了HTML5 History模式，可能会遇到刷新页面时出现404错误的...
vue项目打包部署到服务器的方法示例
10-18
Vue项目通常会经历开发、构建、部署这几个步骤，而项目打包部署到服务器则是将开发好的Vue项目移至生产环境的重要环节。本文详细介绍了将Vue项目打包并部署到服务器上的具体方法和步骤，同时也会涉及到一些在部署...
vuejs打包到tomcat问题
qingfeng2556的博客
06-25 806
1、assetsPublicPath发布时build下应为"./"，开发时应该为"/"2\vue-router basevue-router里提供了一个base的属性base类型: string 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" 。...
vue3 打包 在springmvc中访问
wanglj7525的专栏
08-03 676
修改vue.config.js文件 设置指定css/js/img/fonts等静态资源文件夹的打包生成路径。大屏页面需要在web系统登录后访问，所以将vue生成的项目打包后，放进springmvc中，进行路由控制。将生成的assets/screen下的文件拷贝到springmvc项目的同路径下。将index.html拷贝到springmvc的jsp路径下。修改ApplicationContext-mvc.xml文件。我的页面出现了乱码，修改web.xml文件。yarn build 命令打包后。......
如何将前端项目打包并部署到不同服务器环境
weixin_51591826的博客
05-26 5555
如何将前端项目打包并部署到不同服务器环境
tomcat部署前端vue项目（项目上线具体操作）
qq_45349018的博客
02-16 8807
前端Vue项目上线部署操作。
Nodejs 项目打包部署方式
weixin_58495461的博客
03-21 2462
【代码】Nodejs 项目打包部署方式。
tomcat部署vue项目（成功版）
热门推荐
凤舞九天的博客
12-01 1万+
1、tomcat介绍 2、下载tomcat 3、启动tomcat 4、打包vue项目 5、tomcat部署vue项目 1、tomcat简介 tomcat 是免费的web服务器。不使用tomcat也可以打开html页面，但是可以在浏览器的地址里看到file:d:/test.html这样的格式，是通过打开本地文件的形式打开的。使用tomcat后，可以这样127.0.0.1:8080/test.html像访问一个网站似的，访问一个html文件了。 2、下载tomcat https:/...
从零开始：手把手教你部署 Node.js 项目
GP的空间
07-04 7791
在本地执行进行打包。将打包后的文件和其他必要文件拷贝到服务器。在服务器上安装 Node.js 环境。进入项目目录，执行安装依赖。安装 PM2 并检查是否安装成功。使用 PM2 启动项目。通过以上步骤，你应该可以成功部署你的项目。
Tomcat
薄荷糖
06-18 1232
Tomcat部署vue项目: 1, 在vue项目里执行 npm run build --打包出一个dist文件(包含一个html 和多个css, js 文件) 2, 吧dist里面的内容放到tomcat的webapps下的ROOT里, 启动Tomcat 打包方式 npmrunbuild 我们把vue项目打包-- webapps下的ROOT 如果你要用tomcat部署vue, 那么就放到root里, 一个开启，一个结束，这两个是windows的 Tomcat:主要给jav...
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值