在Tomcat上部署Vue.js项目

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

#tomcat #前端 #vue.js

本文介绍如何将使用Vue.js开发的前端项目部署到Tomcat服务器上。首先，通过命令行打包Vue.js项目到dist文件夹，然后利用WinSCP登录服务器，将dist文件夹内容复制到Tomcat的webapps目录下创建的新文件夹中，如bookmanage。访问http://服务器地址:8080/bookmanage即可看到项目。但需要注意，由于应用是单页应用，还需后台配置以避免404错误，可参考相关文章进行配置。

接着上次的图书管理系统

修改完问题后把SpringBoot成功部署到了服务器上
测试了下api接口，能正常访问
那么下面就是在服务器上部署前端的vue.js了

这里的话我们要明确一点
vue.js是一个前端的框架，所以部署的时候并不需要node.js之类的服务器 像本地的

     

      1
     
     

      npm run Dev

只是用来调试用的，不要再线上用它部署

这里我先用比较熟悉的Tomcat来部署
我们先在本地运行命令来打包

     

      1
     
     

      npm run bulid

通过这个命令，我们会打包我们的项目到一个 dist文件夹中

我们把它部署到Tomcat服务器上

用WinSCP软件登陆我们的服务器
找到Tomcat的wabapps目录
把新建一个文件夹，我这里把它命名为 bookmanage
我们把本地dist文件夹里的文件复制到 bookmanage中

完成之后，我们访问默认的8080端口 加上 bookmanage 就可以访问到我们的项目了
例如我的项目地址 http://118.89.159.95:8080/bookmanage
这样我们的前端的项目部署就成功了

————————2018-01-31更新————————

但是仅仅这样还是不够的的

还需要需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

可以参考这篇文章 来配置下。


感谢网友们的指正，我要更加严谨的去完成博客的内容才行！

使用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应用程序。
tomcat部署springboot+vue.doc
04-22
在本教程中，我们将深入探讨如何在Tomcat服务器上部署一个结合了SpringBoot后端和Vue.js前端的应用。 首先，为了在Tomcat上部署SpringBoot+Vue项目，我们需要进行以下步骤： 1. **修改POM文件**： 在SpringBoot...
vue2项目部署tomcat服务器
weixin_30478923的博客
08-24 320
最近开发项目一直遇到一个问题就是vue2的项目打包之后的静态资源怎么部署在tomcat 经过一段时间的研究后，最后解决了这个问题，现在分享给打下 第一步 就是执行 npm run dev 第二步 执行 npm run build 这个不多说 第三步 在build之前 我们需要改项目中config/index.js的配置文件 如图 第四步 build完之后会...
tomcat部署vue项目
qq_36437991的博客
04-14 512
tomcat部署vue项目
Linux使用tomcat发布vue打包的dist或html
最新发布
博客
11-06 962
Linux使用tomcat发布vue打包的dist或html
tomcat 部署vue前端项目_Vue项目部署到nginx/tomcat服务器的实现_輕微_前端开发者
weixin_42514107的博客
01-13 226
开发完的1.router(history)模式vue项目部署到nginx1)修改router模式为history(默认为hash)const router = new VueRouter({routes,mode: 'history'});对路由模式不清楚的小伙伴，可以看这篇vue-router路由模式详解2)修改config/index.3)修改nginx配置server {listen ...
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
Zhangwei557的博客
06-03 3419
2、解压tomcat文件,可以通过快捷键(command+shift+G)把它放入/Library(资源库中)在 Tomcat 下 webapps→test（test项目文件名）→创建WEB-INF→创建web.xml。6、npm run build后生成dist文件，放到tomcat中webapps中，以labo为例。5、开启Tomcat，终端输入sudo sh ./startup.sh，输完回车。至此两个问题解决完成！4、授权bin目录下的所有操作：终端输入。3、在bin目录下打开终端。
tomcat 部署vue前端项目_Tomcat部署vue项目
weixin_34466909的博客
01-13 3118
1、将前端打包后的文件 内容拷贝到Tomcat的webapps下，可以直接丢入一个文件夹，访问时链接需要文件夹名称。为了链接的简洁可以直接放在ROOT下。2、此时可能遇到的问题一、启动后访问不到，页面F12显示如下图，那么就需要检查一下配置的访问路径是否对的。当前我是把dist文件夹放在webapp下。需要在前端代码配置一下访问路径加上dista、首先打包之前需要修改config文件夹下的inde...
vue项目部署到nginx/tomcat服务器的实现
10-16
部署Vue项目到Nginx/Tomcat涉及将构建生成的静态资源文件托管在服务器上，并确保应用能够正确地处理前端路由。 在Vue项目中，默认情况下，路由是通过hash模式来实现的，即URL中会有'#'符号。但为了美观，我们通常...
毕设：心理健康管理子系统(SSM+Tomcat+Vue.js+七牛云服务).zip
10-16
这是一个基于Java技术栈和前端Vue.js框架的毕业设计项目，主要构建了一个心理健康管理子系统。系统采用Spring Boot（SSM的升级版）、Tomcat作为服务器、Vue.js作为前端框架，并结合七牛云服务来实现数据的存储和传输...
spring boot项目和vue一起放在tomcat部署
11-13
在本文中，我们将介绍如何将 Spring Boot 项目和 Vue 一起部署到 Tomcat 服务器中。这个过程需要我们对 Tomcat 服务器进行配置，以便能够正确地部署并运行我们的应用程序。 Spring Boot 项目和 Vue 的结合 在 ...
使用tomcat部署vue项目
qq_41223443的博客
07-13 8497
1 首先需要修改vue项目中的Route中的index.js文件，新增mode:‘history’,base:’/vue/' export default new Router({ routes: [{ path: '/', mode:'history', base:'/vue/', name: '', component: login, hidden: true, meta: {
Vue 2 部署到 Tomcat
蓝壳优码库
02-15 665
将Vue安装到全局：npm install -g vue 全局安装vue-cli脚手架：npm install -g @vue/cli Vue使用脚手架创建项目：vue init webpack「项目名称」 项目创建成功后，打开config/index.js文件将build中的assetsPublicPath: '/'，修改成 assetsPublicPath: './'； 执行npm run build命令，会在项目目录下生成dist文件夹，将dist下的文件移动到tomcat的webapps文件
VUE---vue部署到tomcat服务器
Miracle_Gaaral的博客
05-30 4239
一.修改config-->index.js文件, 把build:{} 下的assetsPublicPath: '/',改成assetsPublicPath: './',---------解决首页加载空白问题 build: { // Template for index.html index: path.resolve(__dirname, '../dist/ind...
springboot+vue2前后端分离项目部署到tomcat
weixin_63285028的博客
06-27 736
springboot+vue2前后端分离部署
入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）
@素素~的博客
08-28 1395
入门vue——创建vue脚手架项目 以及 用tomcat和nginx分别部署vue项目（vue2）
多个vue项目部署到一个Tomcat中
jiangjunyuan168的博客
11-23 2359
问题： 只有一个服务器，但是需要在服务器中同时部署多个vue项目，将所有的vue项目静态文件放到tomcat的webapp目录下是不可取的，而在不使用Nginx的情况下，就可以利用Tomcat对这些vue项目进行代理。 解决方法： 假设Tomcat在服务器中的路径为： /www/server/tomcat 1、在 /www/server 目录下创建两个新的文件夹，分别取名为 vue1、vue2。 将第一个vue项目打包生成的dist文件放置在vue1文件下， 将第二个vue项目打包生成的dist文件放置在v
Tomcat发布VUE CLI2项目详细及问题
丨Anna丨的博客
05-12 454
Tomcat发布VUE CLI2项目详细及问题 1发布过程 1.1 修改配置: build/webpack.prod.conf.js output: { publicPath: '/xxx/' //打包文件夹的名称 } 1.2项目根目录执行npm run build重新打包 npm run build 打包完成后根目录生成一个dist文件， 1.3修改 dist 文件夹为项目名称: xxx 1.4 将 xxx 拷贝到运行的 tomcat 的 webapps 目录下...
Vue - Tomcat 与 Vue2 搭建简单测试环境
原小明
07-06 4996
Shell 脚本脚本说明： 进入 vue2 工程目录 进行 工程 build 复制 build 结果到 tomcat 下 测试路径 webpack-tomcat.sh#! /bin/bash echo '------ build start ------'cd ~/sahc/sources/Etag_App/insurance_web/ npm run build cp -r dist/. ~/ja
如何在 Tomcat 上部署多个 Vue 项目？
08-19
### 部署多个 Vue.js 项目到 Tomcat 的方法 在 Tomcat 上部署多个 Vue.js 项目，需要确保每个项目都有独立的上下文路径，并且服务器能够正确识别这些路径。Vue.js 项目本质上是静态资源文件，因此可以通过将其打包后放置在 Tomcat 的 `webapps` 目录下，通过不同的上下文路径进行访问[^4]。 #### 项目打包与目录结构 在部署之前，需要对每个 Vue.js 项目进行打包操作。使用 Vue CLI 构建项目时，确保在 `vue.config.js` 文件中设置正确的 `publicPath`，以便在部署到 Tomcat 的不同路径下时能够正确加载静态资源。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' }; ``` 打包完成后，将生成的 `dist` 目录分别重命名为项目名称，例如 `project1` 和 `project2`，并将它们放置在 Tomcat 的 `webapps` 目录下。此时，Tomcat 会自动将这些目录识别为独立的 Web 应用程序。 #### 访问多个 Vue.js 项目 通过配置不同的上下文路径，可以分别访问不同的 Vue.js 项目。例如，访问第一个项目可以使用 `http://localhost:8080/project1`，而访问第二个项目则使用 `http://localhost:8080/project2`。每个项目的静态资源路径应确保为相对路径，以便在不同上下文中正确加载资源[^4]。 #### 跨域与服务器配置 如果项目之间存在跨域请求需求，应确保 Tomcat 的跨域配置或后端服务的 CORS 配置能够正确处理这些请求。如果后端已经处理了跨域问题，则不需要在 Tomcat 层面重复配置，以避免出现重复头信息导致的错误[^3]。 #### 静态资源路径问题 在部署 Vue.js 项目时，需要注意静态资源（如图片）的路径问题。如果使用绝对路径，可能会导致资源加载失败。建议使用相对路径或通过 `vue.config.js` 中的 `publicPath` 设置为 `./`，以确保资源在不同上下文中正确加载[^1]。 #### Tomcat 配置优化 为了更好地支持 Vue.js 项目的路由功能（如 HTML5 History 模式），可以在 Tomcat 中配置 `web.xml` 文件，添加 URL 重写规则，确保所有请求都指向 `index.html`，从而避免 404 错误。 ```xml <filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class> </filter> <filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ``` 此外，还需要在 `context.xml` 文件中启用 `allowLinking`，以便支持符号链接。 ```xml <Context allowLinking="true"> </Context> ``` 通过上述配置，Tomcat 可以正确处理 Vue.js 项目的路由和静态资源加载问题。 #### 启动与访问 完成部署后，启动 Tomcat 服务器。Tomcat 会在 `webapps` 目录下自动生成相应的上下文路径，并将每个 Vue.js 项目作为独立的应用程序运行。访问不同的上下文路径即可进入对应的 Vue.js 项目界面[^4]。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值