vue/cli创建的项目如何打包部署到tomcat，以及可能会遇到的问题(报错以及页面空白)

最新推荐文章于 2024-06-03 15:47:47 发布
转载 最新推荐文章于 2024-06-03 15:47:47 发布 · 277 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/sxs1995/article/details/90674382

本文介绍了两种方法来解决Vue.js应用在启用history模式后与后端Tomcat服务器的配置问题。方法一是修改后端Tomcat的配置，方法二是添加web-inf/web.xml文件并调整config设置。这两种方案都成功实现了前端路由的正常工作。

方法一：修改后端tomcat配置
转载：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
方法二：添加web-inf/web.xml 文件及修改config配置（本人使用这个实现）
转载：https://blog.youkuaiyun.com/sxs1995/article/details/90674382

RUOYI-VUE-PRO开发环境部署避坑指南
从技术实践立足，从项目管理方法论延伸思考
05-25 1153
本文提供了Ruoyi-Vue-Pro框架在Windows系统上的完整部署指南，包含环境准备、前后端部署流程、数据库初始化、服务验证、高级配置和常见问题解决等关键步骤。环境要求包括JDK1.8+、MySQL5.7+、Redis5.0+等组件，详细说明了后端项目的初始化、打包和启动配置，以及前端项目的构建和Nginx反向代理设置。同时提供了数据库创建、SQL导入的具体命令，并介绍了HTTPS配置、性能优化等高级功能。最后给出了常见问题的解决方案和维护建议，帮助用户快速部署企业级若依系统，并建议首次部署使用测试数
[ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署
weixin_70506521的博客
07-01 7871
[ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署
关于部署vue项目在Linux上的两种方式tomcat以及nignx（1）使用tomcat进行部署
阿丹的博客
05-24 4195
阿丹有话说： 之前在写spring-boot项目的时候是直接写的jsp页面直接打成war包来运行。使用到了tomcat,而且简单方便，但是美中不足就是动画演示以及页面没有办法做的非常美观。自从开始写前后端分离的项目（微服务等）之后，发现element-ui是真的好用。现在想给vue的项目打包部署在自己的服务器上的时候发现了一些不一样。经过两天的学习以及摸爬滚打 ，学到了一些心得。给大家总结出来一个文章。方便大家，也想让大家少走一些弯路（和我一样）。
tomcat部署前端vue项目（项目上线具体操作）
qq_45349018的博客
02-16 8807
前端Vue项目上线部署操作。
关于部署vue项目在Linux上的两种方式tomcat以及nignx（3）使用nignx进行部署
阿丹的博客
05-27 4223
能看到我前端发送的请求都是使用了/api这个公共的路径。那么我们就需要在nginx中设置监听有/api的请求路径，并将请求重写。
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:/...
vue项目打包上传服务器 - vue-cli2 + vue-cli3 空白页，资源无法加载等常见问题解决
maindek的博客
03-13 2322
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些： 1、打包后将 dist 文件夹和 index.html 放...
前端框架Vue（12）——如何将 vue-cli 项目打包压缩（npm run build）后放到服务器
热门推荐
ALLEN的博客
07-20 2万+
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。   如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线  先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html
部署前端报错404 hash 以及history模式下面前端、后端如何配置
weixin_51225684的博客
11-23 2463
1、hash ——即地址栏URL中的#符号。hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持history模式，会出现404 的情况，需要后台配置。
vue cli代理跨域proxy
qq_47443027的博客
03-17 469
1、小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题，如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的，相当于浏览器设置了一道门槛，会报错XMLHTTPRequest can not loadhttp://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 为什么跨域同源非同源自己去查吧，在webpack配置一下proxyT.
spring boot项目和vue一起放在tomcat部署
11-13
spring boot项目和vue一起放在tomcat部署,spring boot项目和vue一起放在tomcat部署
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
最新发布
Zhangwei557的博客
06-03 3425
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項目
u010214773的博客
08-14 6312
vtomcat 部署 vue
vue项目部署tomcat
夜总不会的博客
04-10 754
publicPath: '/vue_example/' vue项目命名。最终访问地址：云服务器ip:8023/vue_example/需要在vue.config.js下配置。在路由中的index.js。
Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤，从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf）
a1764739438的博客
09-05 5447
Centos7通过nginx(编写nginx配置文件，nginx启停)+tomcat（tomcat启停）部署Vue（前端配置文件详细修改）+SpringBoot项目（文件配置，打包步骤）(超详细步骤）
vue项目部署到tomcat服务器
banzhuanren1的博客
12-12 790
开发环境中使用npm run dev 来运行项目 ，但是当我们在生产环境是使用npm run build来运行项目的。 现在记录一下vue项目中的打包部署 一.修改config–>index.js文件, 把build:{} 下的assetsPublicPath: ‘/’,改成assetsPublicPath: ‘./’,---------解决首页加载空白问题、 二：一般情况下会出现加载静...
管理系统总结(前端:Vue-cli, 后端Jdbc连接mysql数据库,项目部署tomcat里)
weixin_69252724的博客
05-30 1653
根据所学的知识, 写一个管理系统, 顺便总结一些知识点准备:前端用vue-cli的框架, 后端用jdbc连接数据库, 项目部署tomcat服务器来完成交互●前端的vue-cli框架搭建可以看的第二小结●后端的tomcat在idea里的相关的配置与集成,可以看。
Vue项目打包部署到Tomcat
尘生杜若
05-10 1万+
废话不多说，直接进入正题 一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。 开发环境：在config文件夹下的dev.env.js中 添加这样一行代码 'use strict' const merge = require('webpack-merge') c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值