将vue项目打包进springboot中

最新推荐文章于 2025-01-24 17:35:29 发布
最新推荐文章于 2025-01-24 17:35:29 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： springboot+vue 文章标签： vue spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Forrit/article/details/111601323
版权

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

    module.exports = {
    publicPath: ''
}

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

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

Vue打包文件dist放在SpringBoot项目下运行（正确实现全过程）（上）
你若为我繁华，我愿成你烟花
07-04 1655
项目开发中，一般我们都会使用SpringBoot+Vue进行前后端开发。在部署时，会后端启动一个服务，再启动一个nginx，nginx中配置前端打包文件dist进行项目访问。实际上，我们也可以把打包好的dist目录放在SpringBoot项目下进行部署。
vue打包部署到springboot并生成war包
u014694915的博客
05-28 2592
项目是基于前后端分离的仓库管理系统后端前端。
vue打包整合到springboot中
祁_z
04-25 7988
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 1914
让其继承一个类：SpringBootServletInitializer，并且覆盖 configure 方法，在方法中添加 return builder.sources(WarehouseSystemApplication.class);将Vue项目dist文件夹下的所有文件Copy到SpringBoot项目的resource/打包完成后项目路径下会生成一个新的文件夹dist，打包后的东西都在里面。目录，该目录下会包含不同版本的文件夹，版本号就包含在这些文件夹名称中。要么设置跨域访问（各种操作后还是不行）
前后端分离项目之记录VUE打包部署到Springboot
weixin_53999382的博客
09-02 1505
前后端分离项目之记录VUE打包部署到Springboot 肝了一段时间。项目终于搞定了。记录下打包过程中遇到的坑。以及脱坑的方法。 Vue项目打包 根据以往的经验，只需要修改一下output的publicpath即可。我也是先做的这一步 把原先的地址注释或者删了。就可以打包了。 而当我运行 npm run build 的时候给我报了十几个node的警告。我一看反正不是error。一点不慌。结果嘛。呵呵。springboot一启动就报错。问了度娘。答案惊人的一致。node.js版本太高。降个级就好了。可
vue打包部署到springboot中，看这篇就够了
峰晨的博客
05-23 6024
vue打包部署到springboot中
Springboot项目与vue项目整合打包的实现方式
08-25
因此，本文将介绍如何将Springboot项目与Vue项目整合打包的实现方式。 为什么需要前后端项目开发时分离，部署时合并？ 在一些公司中，部署实施人员的技术无法和互联网公司的运维团队相比，由于各种不定的环境也...
如何把vuejs打包出来的文件整合到springboot里
10-18
1. 修改Vue.js的配置：在Vue项目中，通常需要配置webpack，以便在构建项目时，将打包好的静态资源输出到正确的位置。在config/index.js文件中，可以找到assetsPublicPath配置项。为了确保构建的静态资源与Spring ...
将 vue3 项目打包后部署在 springboot 项目运行
最新发布
m0_74825502的博客
01-24 959
服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你 app 依赖的页面。检查前端的 vue-router 使用历史模式还是哈希模式，历史模式（HTML5 模式）需要后端额外配置，配置参考上文。在 vite.config.js（.ts） 设置开发或生产环境服务的公共基础路径（base配置项），这里不使用相对路径。检查 index.html ，查看 script 和 link 标签的地址，应该是绝对路径（不含./）
springboot如何使用vue打包过的页面资源
08-25
本文详细介绍了 Spring Boot 如何使用 Vue 打包过的页面资源，包括了 Webpack 打包、后端 Spring Boot 项目、静态资源配置和测试静态文件等多个方面的内容，对大家的学习或者工作具有一定的参考学习价值。
vue打包整合到spring boot一记
qq_15054679的博客
05-30 4516
目录背景vue-cli打包之前的配置总结 背景 前段时间，根据需求，要将项目烧入到芯片，但我的擅长之处就是前后端分离开发，因此需要前端vue开发好，打包放到后端里面一起执行。那时候碰到好多貌似不可逾越的坑，今天终于可以抽出点时间，记录一下过程笔记。 vue-cli打包之前的配置 脚手架创建会生成如下的目录： 首先我们先把vue路由里的#去掉 只需在router里面加如下代码： const r...
vue打包整合到springboot
qq_42126105的博客
08-10 2071
vue-cli打包整合到springboot遇到的问题。
[Vue] 4. vue4打包并发布到springboot里面
animalcoder
03-16 1411
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 2358
想要整合它们，首先打包完的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 935
鉴于网络上的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 2942
为了将Vue项目打包并部署到Spring Boot项目中，你需要进行以下步骤： 在Vue项目中使用npm run build命令打包项目。 将打包出来的dist文件夹中的内容复制到Spring Boot项目的resources/static文件夹中。 修改Spring Boot项目的配置文件，使得它能够读取静态文件。 启动Spring Boot项目，并在浏览器中访问即可。 ...
vue+springboot打包发布
沐雨云楼
10-08 9777
前面介绍过感觉vue和springboot的几篇文章，当一个项目做完了后，就该打包发布了。本节就研究下打包发布。 vue element admin开发 vue+springboot分页交互 项目使用的技术： 开发工具: idea 前端: 使用vue element admin改造的 后端：springboot、mysql、jpa 打包手段: maven 插件 结果图： 1.打包原理 前后端分离，先看下如何分别打包。 vue前端打包，可以通过package.json里提供的命令。如：npm ru
Vue整合到Spring Boot
热门推荐
Rhine
12-24 1万+
前端使用Vue，后台使用Spring Boot。
Vue项目打包到Spring Boot后部署Tomcat
sensen的博客
10-10 5467
经过几天的调试，终于将vue+springboot的前后端分离项目，整合后成功部署到服务器。本文章来记录一下这几天遇到的问题。整合后发布到Tomcat遇到的主要问题：访问项目路径404；发布到tomcat后css、js等资源文件404问题；访问项目路径为空白页
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的路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值