将vue项目打包进springboot中

Vue项目部署至SpringBoot
最新推荐文章于 2025-01-24 17:35:29 发布
原创 最新推荐文章于 2025-01-24 17:35:29 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #spring boot

本文介绍如何在vue.config.js中设置publicPath，并通过npm run build命令打包Vue项目。之后，将生成的dist文件夹内容迁移至SpringBoot项目的static目录下以实现前端资源的部署。

  1. 在vue.config.js中配置：

    module.exports = {
    publicPath: ''
}

  2. 终端运行npm run build ，打包后会在项目目录下生成dist文件夹

  3. 将dist文件夹下内容复制到springboot项目的static文件夹下

Vue整合到Spring Boot
Rhine
12-24 1万+
前端使用Vue，后台使用Spring Boot。
Vue打包文件dist放在SpringBoot项目下运行（正确实现全过程）（下）
你若为我繁华，我愿成你烟花
07-11 1272
在上一篇中，实现了Vue打包文件dist放在SpringBoot项目下运行。
Springboot项目与vue项目整合打包的实现方式
08-25
主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue打包整合到springboot中
祁_z
04-25 8086
1.修改vuejs的config/index.js,在里面找到assetsPublicPath，改为/,记住，是build:{}这里的，不是上面dev:{}的 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths as...
vue打包部署到springboot,通过tomcat运行
u014694915的博客
05-23 2136
让其继承一个类：SpringBootServletInitializer，并且覆盖 configure 方法，在方法中添加 return builder.sources(WarehouseSystemApplication.class);将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面。目录，该目录下会包含不同版本的文件夹，版本号就包含在这些文件夹名称中。要么设置跨域访问（各种操作后还是不行）
将 vue3 项目打包后部署在 springboot 项目运行
最新发布
m0_74825502的博客
01-24 1029
服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你 app 依赖的页面。检查前端的 vue-router 使用历史模式还是哈希模式，历史模式（HTML5 模式）需要后端额外配置，配置参考上文。在 vite.config.js（.ts） 设置开发或生产环境服务的公共基础路径（base配置项），这里不使用相对路径。检查 index.html ，查看 script 和 link 标签的地址，应该是绝对路径（不含./）
vue打包部署到springboot并生成war包
u014694915的博客
05-28 2744
项目是基于前后端分离的仓库管理系统后端前端。
如何把vuejs打包出来的文件整合到springboot里
10-18
1. 修改Vue.js的配置：在Vue项目中，通常需要配置webpack，以便在构建项目时，将打包好的静态资源输出到正确的位置。在config/index.js文件中，可以找到assetsPublicPath配置项。为了确保构建的静态资源与Spring ...
springboot如何使用vue打包过的页面资源
08-25
本文详细介绍了 Spring Boot 如何使用 Vue 打包过的页面资源，包括了 Webpack 打包、后端 Spring Boot 项目、静态资源配置和测试静态文件等多个方面的内容，对大家的学习或者工作具有一定的参考学习价值。
前后端分离项目之记录VUE打包部署到Springboot
weixin_53999382的博客
09-02 1547
前后端分离项目之记录VUE打包部署到Springboot 肝了一段时间。项目终于搞定了。记录下打包过程中遇到的坑。以及脱坑的方法。 Vue项目打包 根据以往的经验，只需要修改一下output的publicpath即可。我也是先做的这一步 把原先的地址注释或者删了。就可以打包了。 而当我运行 npm run build 的时候给我报了十几个node的警告。我一看反正不是error。一点不慌。结果嘛。呵呵。springboot一启动就报错。问了度娘。答案惊人的一致。node.js版本太高。降个级就好了。可
Vue打包文件dist放在SpringBoot项目下运行（正确实现全过程）（上）
你若为我繁华，我愿成你烟花
07-04 1868
项目开发中，一般我们都会使用SpringBoot+Vue进行前后端开发。在部署时，会后端启动一个服务，再启动一个nginx，nginx中配置前端打包文件dist进行项目访问。实际上，我们也可以把打包好的dist目录放在SpringBoot项目下进行部署。
vue打包部署到springboot中，看这篇就够了
峰晨的博客
05-23 6895
vue打包部署到springboot中
vue打包整合到spring boot一记
qq_15054679的博客
05-30 4577
目录背景vue-cli打包之前的配置总结 背景 前段时间，根据需求，要将项目烧入到芯片，但我的擅长之处就是前后端分离开发，因此需要前端vue开发好，打包放到后端里面一起执行。那时候碰到好多貌似不可逾越的坑，今天终于可以抽出点时间，记录一下过程笔记。 vue-cli打包之前的配置 脚手架创建会生成如下的目录： 首先我们先把vue路由里的#去掉 只需在router里面加如下代码： const r...
vue打包整合到springboot
qq_42126105的博客
08-10 2191
vue-cli打包整合到springboot遇到的问题。
[Vue] 4. vue4打包并发布到springboot里面
animalcoder
03-16 1433
Vue-cli版本:4.0 1.配置vue.config.js const path = require('path') module.exports = { // 基本路径 整个文件夹在哪 //publicPath: process.env.NODE_ENV === 'production' ? '/static/' : './', publicPath: './', ...
vue + springboot 打包成一个.jar
qq_56660301的博客
11-20 2503
想要整合它们，首先打包完的vue的index.html可以直接打开1.ruoter的路由要设置好,修改路由文件，ruoter里的index.js2.修改配置文件vue.config.js3.修改完以后就可以进行打包了npm run build会生成一个dist文件夹，直接打开里面的index.html,可以显示内容就成功了。前端在vue.config.js写跨域打包后会不生效。建议后端写跨域。
vue3项目打包到springboot项目
weixin_62262335的博客
11-20 1043
鉴于网络上的vue3项目打包到springboot里面，杂七杂八，走了很多弯路，自己记录一下 前端配置 在vue.config.js里面设置publicPash:'/static/' 因为我是放在static目录下 路由配置 关于路由有个坑，要用hash模式，路由组件不能用这种方式动态导入。 component: import('../components/set/Permission.vue') 要用这种 { path: '/Permissions', name: '
将Vue项目打包并部署到Spring Boot项目中？
weixin_42611177的博客
01-13 2995
为了将Vue项目打包并部署到Spring Boot项目中，你需要进行以下步骤： 在Vue项目中使用npm run build命令打包项目。 将打包出来的dist文件夹中的内容复制到Spring Boot项目的resources/static文件夹中。 修改Spring Boot项目的配置文件，使得它能够读取静态文件。 启动Spring Boot项目，并在浏览器中访问即可。 ...
vue+springboot打包发布
沐雨云楼
10-08 9951
前面介绍过感觉vue和springboot的几篇文章，当一个项目做完了后，就该打包发布了。本节就研究下打包发布。 vue element admin开发 vue+springboot分页交互 项目使用的技术： 开发工具: idea 前端: 使用vue element admin改造的 后端：springboot、mysql、jpa 打包手段: maven 插件 结果图： 1.打包原理 前后端分离，先看下如何分别打包。 vue前端打包，可以通过package.json里提供的命令。如：npm ru
vue项目打包到springboot
05-13
将Vue项目打包到Spring Boot中，可以将Vue项目打包为静态资源并将其放置在Spring Boot项目中的静态资源文件夹中。这样，当Spring Boot项目启动时，它将自动加载Vue项目的静态资源并将其提供给前端浏览器。 下面是一些简单的步骤： 1. 打包Vue项目 在Vue项目中运行以下命令来打包项目： ```bash npm run build ``` 这将在项目的`dist`文件夹中生成一个打包好的项目。 2. 将Vue项目静态资源复制到Spring Boot项目 将Vue项目的静态资源复制到Spring Boot项目的静态资源文件夹中（默认为`src/main/resources/static`）。在这里，您可以将Vue项目的`dist`文件夹中的内容复制到该文件夹中。 3. 在Spring Boot中配置静态资源 在`application.properties`文件中添加以下配置： ```properties spring.resources.static-locations=classpath:/static/ ``` 这将告诉Spring Boot将静态资源加载到类路径上的`/static`文件夹中。 4. 运行Spring Boot项目 现在，您可以运行Spring Boot项目并在浏览器中访问Vue项目的静态资源。 如果您需要在Spring Boot中使用Vue的单页应用程序（SPA），则可以使用Vue Router，并在Spring Boot中配置路由以匹配Vue的路由。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值