把vuejs打包出来的文件整合到springboot里

本文详细介绍了如何将VueJS构建的前端项目打包并与SpringBoot后端项目整合的步骤。主要内容包括:修改VueJS配置文件,执行构建命令生成dist文件夹,将其复制到SpringBoot项目的静态资源目录,并引入Thymeleaf依赖。通过此教程,读者可以实现前后端分离项目的无缝对接。

把vuejs打包出来的文件整合到springboot里

1.修改vuejs的config/index.js,在里面找到assetsPublicPath,改为/dist/,记住,是build:{}这里的,不是上面dev:{}的。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/dist/',

2.执行npm run build,会出现一个dist文件夹在vuejs项目目录里。
3.把这个dist文件夹copy到springboot的resources/static/,记住,是整个dist连文件夹一起copy过来。
4.项目引入thymeleaf依赖

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

访问localhost/dist/index.html/#/就可以

参考博客
https://blog.youkuaiyun.com/u014054437/article/details/79981307#commentBox

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值