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

最新推荐文章于 2021-03-18 17:47:58 发布
最新推荐文章于 2021-03-18 17:47:58 发布
阅读量223 收藏
点赞数
分类专栏： vue
原文链接：https://blog.csdn.net/sxs1995/article/details/90674382
版权

方法一：修改后端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.csdn.net/sxs1995/article/details/90674382

chucktan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目打包布署
chenlim87的博客
12-25 1万+
我们使用Vue做项目时，通常前端是单独部署。用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览： ...
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
最新发布
Zhangwei557的博客
06-03 601
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目录下打开终端。
Vue打包发布用tomcat运行起来后无法访问，出现空白页问题的解决方案
互联网的修罗场
02-22 5925
现象 使用npm run build发布打包vue前端项目http://localhost:8080/xxx （webapps下的发布的文件夹名）出现空白页，使用F12查看如下图： 原因 由于webpack打包引入css js等文件路径为绝对路径，因此导致tomcat等web server相对路径访问不到而出现空白页和ERR_ABORTED错误。 解决 1.在build/webpac...
VUE部署到tomcat下访问页面显示空白
喂飞翔的专栏
03-04 2308
背景 今天突然心血来潮想把现在使用nginx部署的vue，放到tomcat中，想着这还不So Easy，文件夹复制到tomcat的webapps目录下，启动，结果页面显示空白，纳尼？？？。 原因分析 询问度娘后，都说F12看下控制台是不是404错误，结果我这边控制台不报错，就页面空白，怎么办？挨个排查吧。最终我这边的解决办法如下： 1.config/index.js 更改assetsPublicPath: '/'为assetsPublicPath: ‘./’ module.exports = { de
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
11-27
$ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本，我测试用的是macOS，所以下载了第二个压缩包 ​ 下载到本地后，解压缩，并且将解压缩后的文件夹复制到以下路径下，其中...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
vue项目部署到nginx/tomcat服务器的实现
10-16
主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3项目打包后自动化部署到服务器的方法
10-14
如果一切顺利，你的 Vue CLI 3 项目就会被成功部署到服务器上。 需要注意的是，以上方法适用于小型项目或个人项目。对于大型或企业级项目，通常会使用更复杂的部署策略，如使用 CI/CD 工具（如 Jenkins、GitLab CI/...
webpack打包的vue项目部署在tomcat，页面不能加载的问题
weixin_43331469的博客
03-15 3324
vue项目部署在tomcat上首先用 npm run build 命令将前项目打包，如果没有改过打包文件的路径会在项目根目录下出现一个dist文件夹，这个文件夹就是项目的打包内容。 将打包好的dist文件夹复制到tomcat的webapps文件夹下，然后运行bin目录下的startup.bat(linux下运行startup.sh)启动tomcat。在浏览器地址栏输入localhost:80...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
11-20
本地开发没问题能正常请求到接口，部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题。 经过查询得知：Remote Address代表的是当前HTTP请求的远程地址，即HTTP请求的源地址。 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的，而部署到服务器后相当于换了个环境（ ip地址和端口已经改变 ），此时proxy代理就出错了。 解决方法： 地址错误了，那就换到正确的地址。 即：本地开发环境 代理时用127.0.0.1，生产环境用服务器的ip 在Vue
《实战：如何搭建一个完整的 Vue2.0 项目》- 2、vue.config.js 配置
前端技术
03-18 2604
在根目录下创建 vue.config.js 文件，@vue/clli-service 会自动加载。直接拷贝如下内容即可。 const webpack = require('webpack'); const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } // 加载 stylus 文件，可以是多个 function importStylus (rule) { ru
《tomcat部署vue工程访问空白页》
杨晓风 迷迭香的记忆
07-31 1742
前言： 在mac上安装tomcat+jdk，用以部署vue工程 安装步骤：https://www.jianshu.com/p/fe807440fda1 vue工程打包：npm run build 部署：将打包后的vue工程---dist，放在tomcat-webapps下 启动tomcat：cd tomcat...
vue项目打包部署到linux tomcat服务器，解决一刷新就报错404问题
qq_32266991的博客
03-05 1831
1.部署到服务器前，更改webpack配置，修改index.js中以下配置 2.运行npm run build 或者cnpm run build命令，打包完成后，在项目的根目录dist文件下生成了如下文件： 3.tomcat的webapps创建文件夹：这里以文件夹名“demo”示例 将static文件夹和index.html复制到demo文件夹，不出意外，这个时候浏览器输入：http://服务器I...
vue cli3项目部署到Tomcat服务器上
热门推荐
qq_38337245的博客
07-27 1万+
第一次发布vue项目，虽然是本地电脑的，前端使用vue cli3，后端是SSM，遇到了一些问题，比如空白页面，还有请求数据404问题，然后找答案都是不全或者是没有用，不过一点点测试就搞定了，下面是我整合的结果： 1.在Tomcat 文件夹中新建一个文件夹名字应该可以随便取，我命名为myvue tomcat地址：D:\apache-tomcat-8.5.40\webapps 2.在myvu...
@vue/cli 5.0.8 创建vue项目
06-06
@vue/cli 5.0.8 是一个开发工具，用于创建和管理 Vue.js 项目。它提供了一个集成的命令行界面，可用于快速创建基于 Vue.js 的应用程序，并且使项目的开发和维护变得更加容易。 使用@vue/cli 5.0.8 和对应的命令，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值