vue项目部署到tomcat服务器

最新推荐文章于 2024-06-03 15:47:47 发布
最新推荐文章于 2024-06-03 15:47:47 发布
阅读量720 收藏 1
点赞数
分类专栏： vue 文章标签： vue部署到服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/banzhuanren1/article/details/103518296
版权
本文详细介绍了Vue项目在生产环境的部署流程，包括解决首页加载空白及静态资源加载失败的问题，通过修改配置文件和添加代码实现优化，最终在Tomcat服务器上成功部署。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开发环境中使用npm run dev 来运行项目 ，但是当我们在生产环境是使用npm run build来运行项目的。
现在记录一下vue项目中的打包部署
1.解决首页加载空白问题
修改config–>index.js文件, 把build:{} 下的assetsPublicPath: ‘/’,改成assetsPublicPath: ‘./’
在这里插入图片描述
二：解决静态资源加载失败的情况
在build–>utils.js文件中添加一行代码—publicPath:’…/…/’
在这里插入图片描述
运行npm run build 之后产生dist目录
在这里插入图片描述
在tomcat目录wepapps文件夹中新建music文件夹，将打包出来的dist文件放入music文件夹中
在这里插入图片描述
在命令行中输入startup启动tomcat服务器
输入网址，即看到效果，成功部署完成OK!
在这里插入图片描述

vue项目部署运行到tomcat上
躺着写代码的博客
07-03 5万+
    使用webstrorm开发vue前端工程项目时，使用命令npm run dev开启服务，可以通过访问电脑IP:电脑端口实时预览页面，当时我在想使用手机端来调试页面时，发现即使手机与电脑处于同一局域网环境下，仍然无法访问。    这就很奇怪了 ，平时只要我的电脑和手机处于同一局域网环境下，使用手机访问电脑IP:电脑端口/项目名，就可以正常访问，现在却不行，结果去网上搜索，普遍的一个解决办法是...
springboot+vue2项目部署tomcat无法访问打开，始终报错跨域无法访问
最新发布
WAYLiuX的博客
03-09 266
如果要将自己的项目部署到tomcat中访问，那么就需要在源码中把接口路径全部拼接上打包的war名称 在源码中测试为：this.$axios.post(this.$httpUrl + '/user/login', this.logiForm)，但是部署的话修改为：this.$axios.post('http://localhost:8081/New_Project-0.0.1-SNAPSHOT/user/login'，重新打包部署成功访问！
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:/...
tomcat部署vue項目
u010214773的博客
08-14 6218
vtomcat 部署 vue
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
Zhangwei557的博客
06-03 2744
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项目（项目上线具体操作）
qq_45349018的博客
02-16 8390
前端Vue项目上线部署操作。
vue项目部署到nginx/tomcat服务器的实现
10-16
在进行Vue项目部署到Nginx或Tomcat服务器的过程之前，需要了解一些基本概念。Vue.js是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Nginx是一个高性能的HTTP和反向代理服务器，而Tomcat则是一个...
springboot+vue项目部署在tomcat上
weixin_47902184的博客
11-03 2776
has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values，项目部署tomcat
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
09-14
二是打包成war包，部署到独立的Tomcat服务器。这里我们讨论第二种方法。在SpringBoot项目中，使用`mvn clean package`命令打包为war文件，然后将其上传到服务器。 3. **部署到Tomcat** 在服务器上，确保已安装...
vue项目打包部署到服务器的方法示例
10-18
#### Vue项目部署到服务器 部署Vue项目到服务器通常涉及将构建生成的文件上传至服务器，以及确保服务器能正确地服务这些静态文件。 1. **服务器选择**：可以是传统的Web服务器如Apache、Nginx，也可以是应用服务器...
使用tomcat部署vue项目
emgexgb_sef的博客
08-28 4516
在bin目录下，启动tomcat就可以了。webapp下新增vue文件夹。
tomcat 部署vue前端项目_Tomcat下部署vue项目[history模式]
weixin_29785723的博客
01-13 912
1.项目发布后通常有两种访问方式，2.第一种方式：ip+端口(前端后端修改)范例：vue-cli项目使用路由，tomcat作为服务器，项目文件夹名 saas步骤：1.修改配置文件 router.jsexport default new Router({mode:'history', // 将mode值改为historyroutes: [{path: '/',name: 'HelloWorld',c...
【tomcat】部署vue项目
lorogy的博客
07-17 1393
vue项目打包为dist 在tomcat的webapps下新建文件夹，比如myvue 将dist内的index.html和static上传到myvue目录下 浏览器输入http://[ip]:[port]/myvue即可访问
vue部署到tomcat服务器
blaze_jack
09-30 299
操作系统为centos 首先安装tomcat，执行 yum -y install tomcat 之后启动 systemctl start tomcat.service 查看启动状态 systemctlstatustomcat 安装完之后访问8080成功即可。 在vue执行 npm runbuild 会在项目根目录生成dist文件夹 将dist文件拷贝到...
tomcat部署vue项目
qq_36437991的博客
04-14 472
tomcat部署vue项目
Vue前端项目部署在tomcat
My note
07-21 3704
修改路由配置src/router/index.js，增加配置base‘/Vue/’，如果这里不配置，会导致部署的项目首页访问一片空白，但不报错，且引入的文件有正常加载。执行npmrunbuild，将打包生成的dist目录下的所有东西粘贴到Tomcat/webapps/路径下新建一个Vue文件夹，Vue是自定义的项目名，访问路径格式>>ipport/Vue，例如http//localhost8080/Vue/，即可访问到Vue项目。前端项目中使用到了代码。...
vue项目部署tomcat
夜总不会的博客
04-10 724
publicPath: '/vue_example/' vue项目命名。最终访问地址：云服务器ip:8023/vue_example/需要在vue.config.js下配置。在路由中的index.js。
tomcat 部署vue前端项目_Tomcat部署vue项目
weixin_34466909的博客
01-13 3061
1、将前端打包后的文件 内容拷贝到Tomcat的webapps下，可以直接丢入一个文件夹，访问时链接需要文件夹名称。为了链接的简洁可以直接放在ROOT下。2、此时可能遇到的问题一、启动后访问不到，页面F12显示如下图，那么就需要检查一下配置的访问路径是否对的。当前我是把dist文件夹放在webapp下。需要在前端代码配置一下访问路径加上dista、首先打包之前需要修改config文件夹下的inde...
tomcat部署vue前端项目
m0_67392182的博客
05-15 4237
Tomcat建立文件夹 1.在webapps文件夹下建立JL文件夹 2.将vue项目中打包好的dist中的static和index.html复制到这个文件夹下 Vue项目修改请求的公共路径 1.vue.config.js修改打包时的公共路径 publicPath: process.env.NODE_ENV === "production" ? "/JL" : "/" Vue项目修改路由配置 base:process.env.VUE_APP_BASE_Title, //-------.
vue项目部署到Tomcat方法
09-10
Vue.js项目部署到Apache Tomcat服务器通常涉及以下几个步骤： 1. **构建项目**：首先确保你的Vue应用已经通过npm run build命令进行了生产环境构建，这将生成一个包含所有静态资源的dist文件夹。 2. **准备文件结构**：你需要把dist文件夹的内容复制到webapps目录下，例如webapps/your-app-name。 3. **配置index.html**：在webapps/your-app-name目录下的index.html中，确保它引用了正确的JavaScript和CSS文件。因为Tomcat默认处理的是静态资源，所以直接引用即可。 4. **修改web.xml**（如果存在）：对于Tomcat 7及更高版本，web.xml中的Context元素需要设置成无状态（stateless）。例如： ```xml <Context docBase="/your-app-name" path="/" reloadable="true" stateless="true"> <!-- 更多配置 --> </Context> ``` 5. **启动Tomcat**：打开命令行，找到Tomcat安装目录，运行 catalina.sh (Windows) 或 catalina.bat 启动服务。 6. **访问应用**：在浏览器中输入 http://your-server-url/your-app-name 即可看到部署后的Vue应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值