vue项目打包放入javaweb中

最新推荐文章于 2024-08-29 13:27:01 发布

H1455483319

最新推荐文章于 2024-08-29 13:27:01 发布

阅读量2.7k

点赞数 3

本文链接：https://blog.csdn.net/H1455483319/article/details/109079482

版权

本文档介绍了如何将Vue.js应用配置为使用hash模式，并在main.js中调整axios请求地址。接着，通过npm run build打包项目，生成dist文件夹。然后，将static目录和index.html移动到Java项目的webapp下，删除WEB-INF下的index.jsp。最后，启动服务器完成部署。此过程适用于前端与后端分离的开发模式。

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

1.修改vue中路由的模式为hash，或者不写（默认hash）

const router = new VueRouter({
  routes
})

2.将入口的main.js中的axios请求地址前缀删除或者注释

// axios.defaults.baseURL = '/api'

3.执行npm run build进行打包，会生成dist文件
在这里插入图片描述 4.将static和index.html放入java项目中的webapp下

5.删除WEB-INF下的index.jsp
6.启动服务器

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

H1455483319

关注关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue打包放到Java项目里_bat脚本使用笔记之vue打包到Java工程中

weixin_39694016的博客

02-26

859

随着vue的流行，越来越多的项目使用了vue作为前端框架，项目中遇到需要将vue打包到spring boot 中的static中，直接访问，不需要使用nginx，我们的方式是保持前后端完全独立开发代码，项目代码互不影响，借助jenkins这样的构建工具在构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包，最后就得到了...

vue打包放到java中启动_Springboot+Vue打包部署总结

weixin_39614561的博客

02-27

1700

文章目录一、Vue打包+部署1. 打包(npm run build:prod)2.nginx部署前端vue项目二、Springboot打包+部署1.打包(mvn clean package)2.部署三、大功告成！一、Vue打包+部署1. 打包(npm run build:prod)打完之后会在src同级目录下生成dist文件下，点开index.html页面在浏览器打开，会发现报错解决步骤：打开we...

参与评论您还未登录，请先登录后发表或查看评论

把vue整合到java项目中_如何把vuejs打包出来的文件整合到springboot里

weixin_31115505的博客

02-13

1490

这个需求不知道是不是合适，因为静态的vuejs项目，用nginx部署，听说很快。一般有这个需求的，都是用tomcat来部署java项目，tomcat转发静态vuejs，应该不会很快。好吧，以上都是听说。。。应该。。。实际嘛？。。。废话不多讲，马上搞起。这里第一句要说的是，目前这个方式我认为只支持#这个方式的路由，如果改成了html5的mode: 'history'，应该是不支持的。开始准备：注意，...

vue项目如何打包，java项目如何打包

一只猫

01-27

1187

vue项目如何打包 1、检查项目根目录下的package.json文件，确认是否存在名为"build"的脚本。这个脚本应该包含打包相关的命令。 2、如果没有找到"build"脚本，可以手动添加它。在scripts部分中添加以下内容：

vue打包放到java中启动_自定义Vue组件打包、发布到npm以及使用

weixin_30286727的博客

02-27

917

本文将帮助：将自己写的Vue组件打包到npm进行代码托管，以及正常发布之后如何使用自己的组件。本文讲述的仅仅是最基础的实现，其他复杂的操作需要非常熟悉webpack的相关知识，作者将继续学习。按照大佬文中写的一步步操作，够细心的话基本可以一步到位。下面总结一下发布步骤：1. 利用Vue的脚手架新建一个简易版的Vue项目my-project：vue init webpack-simple my-pr...

electron结合JAVAweb_将现有vue项目基于electron打包成桌面应用程序

weixin_39851048的博客

12-20

1415

一、前言项目本来打算采用B/S架构去做的，只是在"人群中多看了你一眼"。二、使用electron集成桌面应用本身项目是使用vue-cli开发的，在使用electron之前，需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了.2.cd electron-quick-start->npm install->npm start 到这就能...

黑马JavaWeb开发笔记10(前端完结)——Vue路由介绍&入门、前端工程打包、nginx前端部署

最新发布

apple_68589597的博客

08-29

1272

Tomcat部署Maven的JavaWeb项目——这样我们写完程序把程序打包为war包，拿到用户那边启动服务器就可以运行了，简单轻松

走过路过不要错过

03-13

416

1. maven打包如果顺利，那么项目下的【target】目录就会生成一个war包，如下图。如果提示依赖找不着或者包不存在，可以去【File】--》【Project Structure】查看一下导入的包，摸索一下，或者参考我以往的一些博客，有点零散。还有更重要的问题是打包的文件少了一些xml或properties文件，没有这些文件，肯定等会运行不成功。所以我们需要在pom.xml文件设置一下，让maven打包时，把这些文件也打包，如下图。如果最终target目录下包含了你想要的的xm

Java基础面试：mysql三表联查、视图、索引、JavaWeb、hibernate、elementUI、vue、redis击穿雪崩、你自己设计项目的流程以及亮点

weixin_45955617的博客

06-19

654

数据库的索引类似于一本书的目录，能够加快数据库的查询速度。由于索引本身的内存比较大，因此索引往往都是存储到磁盘上面的。

vue将两个项目整合成一个

qq_44792224的博客

08-26

750

关于自动化部署两个项目合并一个项目的解决方案vue-cli3多项目整合到一个项目中维护打包发布vue-cli3多项目整合到一个项目中维护打包发布

vue前端，java后端打包脚本编写

weixin_45958605的博客

10-21

643

项目打包

vue项目如何打包扔向服务器 - Hi-Sen - 博客园

没做过产品的后端不是个好前端

11-06

434

当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple）脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线先来描述一下期间遇到的问题有哪些： 1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。 2、打包好的静态资源均是...

JavaWeb项目结构使用Vue项目

weixin_51604181的博客

09-30

7060

JavaWeb 项目的webapp 包下使用 Vue项目结构， webpack 从0构建 Vue 项目。在项目开发的时候，前端的框架大部分会选择Vue项目，而在如今，Vue 一般都是和SpringBoot项目结合做一个前后端分离的项目，前后端都分别各占一个端口，与JavaWeb项目不同的是，JavaWeb项目一般都是一个端口，直接启动后端和前端。大部分的JavaWeb项目的前端一般都是纯 jsp 或者纯 html ，这让主写后端的犯了难，“ 我写个后端还要去学一大堆的前端的知识吗？

Vue打包后生成一个可修改接口地址的配置文件

林中明月间丶

10-08

2867

先给几个参考： https://blog.csdn.net/cccdf_jjj/article/details/99593533vue2.0中实现打包后可配置接口地址 https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth..

从零开始配置Vue项目(WebApp)

默默的小跟班的博客

06-16

985

Vue项目配置组件初始化安装全局安装 vue-cli npm install –global vue-cli 创建一个基于webpack模板的新项目 vue init webpack my-project Runtime + Compiler — runtime-only （小于6kb，只能用 .vue开发） EsLint—Y Router—Y 无网络环境下，离线配置环境。使用打包好的webpack Terminal进入当前用户文件夹下（如：C:\Users\82601 ） mkdir

Vue打包到java项目中

f2634825250的博客

06-10

2126

1. 修改router 删除mode: "history" 打包好以后吧static和index.html放入web-inf下就行了访问要在路径localhost:8080/#/地址其他问题 https://www.csdn.net/gather_2d/MtTaAg2sNTAxMi1ibG9n.html

JavaWeb—vue（具体使用包含案例）

夏日漱石的博客

04-04

2142

1.Vue组件库Element 1.1Element介绍 1.2 Element组件 1.2.1 Table表格 1.2.2 Pagination分页 1.2.3 Dialog对话框 1.2.4 Form表单 1.3案例 1.3.1案例分析 1.3.2代码实现 2.Vue路由 2.1 路由介绍 2.2 路由入门

vue cli 直接打包成 index.jsp 文件

ruisenLi的博客

11-01

1301

前端项目直接打包成 index.jsp 文件;vue cli 直接打包成 index.jsp 文件

怎么在php嵌入jsp_vue项目怎么嵌入jsp页面？（方法介绍）

weixin_39916511的博客

03-09

348

vue项目怎么嵌入jsp页面？下面本篇文章给大家介绍一下在vue项目中嵌入jsp页面的方法，文中通过示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在vue 项目中嵌入jsp页面今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面，想着直接将其嵌入到当前的vue项目中节约开发成本；但是发现并非想象的那么简单创建一个server.vue组件加载jsp...

Vue项目Webpack基础打包配置指南

当我们在开发vue项目的时候，常常需要使用webpack进行项目的打包配置。webpack4是webpack的一个版本，它引入了零配置的概念，让开发者可以无需配置即可快速启动项目，但在复杂项目中仍需手动配置以满足特定需求。 ...