(自用）vue cli3项目打包部署到tomcat服务器运行

最新推荐文章于 2024-08-19 22:47:23 发布
最新推荐文章于 2024-08-19 22:47:23 发布
阅读量2.7k 收藏 8
点赞数 4
分类专栏： 前端 文章标签： vue tomcat
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41746803/article/details/103780929
版权

（自用）vue cli3项目打包部署到tomcat服务器运行

第一步，创建vue.config.js

在项目根目录下创建一个文件，命名为vue.config.js
在项目根目录创建vue.config.js

第二步，编写vue.config.js的内容

在这里插入图片描述
代码如下：

module.exports = {
  outputDir: 'ehome1',
  assetsDir:'static',
  publicPath:'',
}

第三步修改路由方式

在这里插入图片描述

添加空路由

在这里插入图片描述

打包部署

运行命令npm run build
在这里插入图片描述在这里插入图片描述
找到生成的文件夹，默认放在项目的根目录下
在这里插入图片描述
将项目放在tomcat中
在这里插入图片描述
在这里插入图片描述
搞定收工！！

第三号萌新
关注
专栏目录
vue项目打包部署到tomcat（详细）
蜗牛~~
06-21 5857
hash路由模式打包部署到tomcat 1、修改config/index.js文件下的assetsPublicPath为'./' 2、修改router文件夹下index.js添加 base: ‘/文件夹名称/’ （例如：yuncheng，可以自己随意设置） 3、在tomcat下webapps里面新建一个文件夹，名称是之前配置时设置的名称（yuncheng） 4、将自己打包的dist文件夹的内容放进tomcat下的webapps的yuncheng文件夹下 注意：2.3.4可以简化为：在...
通过Vue CLI3 快速创建Vue项目并部署到tomcat
盏茶作酒的博客
07-20 440
1、前提 首先你要安装好nodejs和yarn,直接在官网下载安装包，一键安装即可，不需要什么环境配置，我安装的是最新版本（node-v10.13.0、yarn-1.12.3） 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3，而自己学习的GitHub上的项目为2~ 2.1 新版本 Vue CLI 3 写这篇文章的时候官网默认的为Vue CLI 3 npm install -g @vue/cli # OR yarn global add @vue/cli 2.2 旧版本 Vu
VUE3项目部署到Tomcat
斜照却相迎的博客
09-14 1089
需求是将一个vue3项目部署到tomcat中，需要改动一些代码以适配。假设希望访问路径是http://localhost:8080/mypath。
基于Java+SpringBoot+Vue3前后端分离中大性管理系统设计与实现（有视频教程）
最新发布
qq_57756904的博客
08-19 762
SpringCloud Alibaba企业级实战，微服务一站式解决方案。注册配置中心、网关、负载均衡、服务容错、限流、分布式事务、分库分表、消息中间件、Oauth2单点登录等企业级解决方案。
VueCli3 打包并发布到tomcat
qq_22189479的博客
03-11 3161
1.Vue执行 npm run build打包之前 2.在最外层目录下创建一个vue.config.js文件； 在vue.config.js中输入如下代码： **module.exports = { publicPath: './' } 3.、修改路由配置src/router/index.js，增加配置base: ‘/vuecli3/’， 这里的名称"vuecli3"需要与后面上传到tomcat的...
vue-cli 如何打包上线到tomcat
CatEatApple的专栏
01-17 727
以vue创建的官方例子为例子，我们在开发环境的时候会 npm run dev ，生成   而想要打包成一份很简单， 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js  一种是build 一种是dev ，而我们想要在本地查看打包后的成果，需要在assetsPublicPath 改变它的路径， 具体为什么，可以看index.html引入的文件...
Vue项目打包部署到Tomcat
热门推荐
尘生杜若
05-10 1万+
废话不多说，直接进入正题 一.通常在开发环境下请求后台接口会用到反向代理，而在生产环境中反向代理是不生效的，那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作，更改配置文件去自动切换接口地址。 开发环境：在config文件夹下的dev.env.js中 添加这样一行代码 'use strict' const merge = require('webpack-merge') c...
Vue3.0项目从构建到用tomcat打包并成功运行(前端)
m0_46088410的博客
04-23 1036
1创建Vue3.0demo 1).全局安装 npm uninstall vue-cli -g 2安装Tomcat(我的tomcat和jdk都安在了c盘，看自己想放在哪奥) 1). Tomcat安装需要先下载jdk,选最近的版本jdk就可以 附带网址 https://www.oracle.com/java/technologies/javase-downloads.html 直接点击exe 安装 2). 安完jdk之后配置环境变量 控制面板----->系统和安全----->系统-----&
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
11-27
1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本，我测试用的是macOS，所以下载了第二个压缩包 ​ 下载到本地后，解压缩，...
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vuecli 编译后部署_vue-cli3项目打包后自动化部署到服务器
weixin_39841717的博客
12-21 209
vue项目打包后,将文件复制到服务器显然是很麻烦，于是结合网上的资料，写下这篇自动化部署的记录。一、安装 scp2npm install scp2 --save-dev二、写好脚本例如 upload.js (下面任选一个即可)位置和 package.json平级即可。简略版'use strict'// 引入scp2var client = require('scp2');client.scp('....
vue3 打包部署到tomcat
迎风飞翔的专栏
09-18 3263
有个vue3的项目，要部署到tomcat，网上看了半天，鱼龙混杂，奈何环境不允许google，最终还是配出来了，特此记录下。 特此声明：只根据本项目实际情况，该配置可用，请根据你自己的项目灵活思考。。。 一、改vue.config.js publicPath改为./ ， outputDir可以改为你要部署的项目名称，这样就省的建文件夹，以及再从dist下面拷贝了。devServer中增加assetsPublicPath:'./'，proxy的话根据实际情况，因为我部署到线上，...
Vue3项目部署到tomcat8.5服务器centos8
huaiyingdetective的博客
04-10 479
参考博客： vue-cli3项目打包后自动化部署到服务器 vue-cli3如何部署在服务器的tomcat,以及vue.config.js如何配置才能上线（亲测可用) 首先需要保证tomcat服务器在8090端口（我的Vue项目运行在8090端口上）正常运行，并在tomcat的webapps文件夹下创建dist文件夹 1.修改vue.config.js参数 const path = require('path') const resolve = dir => path.join(__dirname, d
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-cli3如何部署在服务器的tomcat,以及vue.config.js如何配置才能上线（亲测可用）
saiuna的博客
03-15 1万+
vue3.0比2.0简化很多，build文件也没了，很多配置都是默认的，这两天上线查了很多资料都是2.0配置，cli3甚少~本人亲测可用的过程及配置如下（新手一个）： 一、首先在根目录下创建vue.config.js文件 const path = require('path'); var env = process.env.NODE_ENV function resolve(dir) ...
VUE项目打包后使用Tomcat部署 解决页面刷新后404问题
WindNolose的博客
05-17 6993
1.打包VUE项目 命令：npm run build npm run build 打包完成后，项目中会多出来一个dist文件夹，里面就是打包后的文件 2.部署Tomcat 此处采用docker compose的方式部署Tomcat 任意创建一个目录，在目录下编辑docker-compose.yml文件 挂载容器中的/usr/local/tomcat/webapps目录 version: "3" services: tomcat: image: tomcat:8.5 containe
vue3.x部署到tomcat和部署在github在线访问路径问题
hlvy
12-18 701
vue3.x npm run build后 dist里面文件 接着我把这个dist 放在tomcat下发现访问报错 于是我在vue.config.js改了这个 /位./ 结果访问可以但是跳转报找不到js我发现路径问题于是我换成/dist/就可以启动了 我把项目上传到github上面然后设置了在线访问 参考搜索github设置在线访问   访问url发现报...js路径不对 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值