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

最新推荐文章于 2022-11-23 16:41:13 发布
转载 最新推荐文章于 2022-11-23 16:41:13 发布 · 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 1152
本文提供了Ruoyi-Vue-Pro框架在Windows系统上的完整部署指南，包含环境准备、前后端部署流程、数据库初始化、服务验证、高级配置和常见问题解决等关键步骤。环境要求包括JDK1.8+、MySQL5.7+、Redis5.0+等组件，详细说明了后端项目的初始化、打包和启动配置，以及前端项目的构建和Nginx反向代理设置。同时提供了数据库创建、SQL导入的具体命令，并介绍了HTTPS配置、性能优化等高级功能。最后给出了常见问题的解决方案和维护建议，帮助用户快速部署企业级若依系统，并建议首次部署使用测试数
VUE,webpack打包（自动配置）
NI_computer的博客
10-15 438
生成一个基于vue+webpack的项目 1.在终端中进入需要创建项目的文件夹，安装vue/cli-init cnpm install @vue/cli-init -g 2.创建项目模板-webpack vue init webpack app01（你的项目名字） vue init webpack app01 选择需要的配置然后“y” 生成的过程比较漫长可以慢慢等，大概需要十分钟。 完成后可以看到多了一个文件夹。 3.安装依赖 cnpm install 4.运行项目 npm run dev 5.编
vue项目打包布署
chenlim87的博客
12-25 2万+
我们使用Vue做项目时，通常前端是单独部署。用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览： ...
VUE部署到tomcat下访问页面显示空白
喂飞翔的专栏
03-04 2494
背景 今天突然心血来潮想把现在使用nginx部署的vue，放到tomcat中，想着这还不So Easy，文件夹复制到tomcat的webapps目录下，启动，结果页面显示空白，纳尼？？？。 原因分析 询问度娘后，都说F12看下控制台是不是404错误，结果我这边控制台不报错，就页面空白，怎么办？挨个排查吧。最终我这边的解决办法如下： 1.config/index.js 更改assetsPublicPath: '/'为assetsPublicPath: ‘./’ module.exports = { de
Vue打包发布用tomcat运行起来后无法访问，出现空白页问题的解决方案
互联网的修罗场
02-22 6404
现象 使用npm run build发布打包vue前端项目http://localhost:8080/xxx （webapps下的发布的文件夹名）出现空白页，使用F12查看如下图： 原因 由于webpack打包引入css js等文件路径为绝对路径，因此导致tomcat等web server相对路径访问不到而出现空白页和ERR_ABORTED错误。 解决 1.在build/webpac...
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.
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
11-20
本地开发没问题能正常请求到接口，部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题。 经过查询得知：Remote Address代表的是当前HTTP请求的远程地址，即HTTP请求的源地址。 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的，而部署到服务器后相当于换了个环境（ ip地址和端口已经改变 ），此时proxy代理就出错了。 解决方法： 地址错误了，那就换到正确的地址。 即：本地开发环境 代理时用127.0.0.1，生产环境用服务器的ip 在Vue
关于vue4.0打包项目在tomcat中运行显示白屏
qq_37530428的博客
09-17 576
用npm run build把vue打包出来的dist文件夹部署在tomcat中，运行发现页面白屏。打开浏览器开发者工具报错显示： 在vue项目的vue.config.js中把publicPath: '/‘改为publicPath: './‘，重新打包部署即可。
Vue发布Tomcat页面空白不显示内容
楊帥
06-11 3386
修改config/index.js module.exports = { dev: { ... assetsPublicPath: './', ... }, build: { ... assetsPublicPath: './', ... } } 修改src/router/index.js export default new Ro...
webpack打包的vue项目部署在tomcat，页面不能加载的问题
weixin_43331469的博客
03-15 3454
vue项目部署在tomcat上首先用 npm run build 命令将前项目打包，如果没有改过打包文件的路径会在项目根目录下出现一个dist文件夹，这个文件夹就是项目的打包内容。 将打包好的dist文件夹复制到tomcat的webapps文件夹下，然后运行bin目录下的startup.bat(linux下运行startup.sh)启动tomcat。在浏览器地址栏输入localhost:80...
解决：IDEA上Vue项目打包部署到Tomcat上页面空白问题
y_h123的博客
10-12 2667
一、前提，首先服务器(Linux系统)88.88.88.11上部署了Tomcat,假设端口默认8080； 二、IDEA中的vue项目打war包； 1、首先vue项目能成功运行并且有显示的内容； 2、找到config/index.js文件做修改； 修改config/index.js中dev与build中的 assetsPublicPath后 "/" -> "./" ； 如果不修改，Tomcat上运行时会显示空白页面 3、Terminal终端执行 npm run ...
idea2017.3.5新建web项目时没有WEB-INF、lib、classes和web.xml等目录和文件以及项目的配置问题
WinstonLau的博客
04-20 6966
请看下面这三篇博客 博客1-解决web.xml文件的问题 博客2 博客3
Vue-cli项目部署问题及解决方案
luochanxiong6435的博客
08-23 3751
1.css样式问题： 项目在开发模式(dev)时样式渲染正确，但执行npm run build时会出现生产模式样式与开发模式样式不一致的问题，具体包含如下两部分问题。 （1）字体静态文件路径问题 在执行build后，我们会在项目的dist文件夹内获得index.html和static文件夹两部分，其中static文件夹中保存了项目依赖的各种静态文件，但在运行时会发现，字体文件fonts在引用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值