springboot怎么引用vue静态文件
时间: 2023-10-14 16:29:18 浏览: 104
springboot如何使用vue打包过的页面资源
在 Spring Boot 中引用 Vue.js 静态文件有以下几个步骤:
1. 在 Vue.js 项目中打包生成静态文件
在 Vue.js 项目中运行以下命令,将会在项目根目录下生成一个 dist 目录,里面包含了打包后的静态文件。
```
npm run build
```
2. 将静态文件放置到 Spring Boot 项目中
将 dist 目录中的静态文件复制到 Spring Boot 项目的资源目录下,例如:src/main/resources/static。
3. 在 Spring Boot 项目中配置静态文件访问路径
在 Spring Boot 项目中,可以通过配置文件或者 Java 代码来配置静态文件访问路径。以下是配置文件的示例:
```yaml
spring:
resources:
static-locations: classpath:/static/
```
4. 在 Spring Boot 项目中引用 Vue.js 静态文件
在 Spring Boot 项目的页面中引用 Vue.js 静态文件,例如:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spring Boot + Vue.js</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
```
以上就是在 Spring Boot 中引用 Vue.js 静态文件的基本步骤。需要注意的是,在引用静态文件时,需要根据实际情况修改文件路径和文件名。
阅读全文