vue项目打包到springboot
时间: 2023-09-08 11:11:33 浏览: 70
将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的路由。
相关问题
vue springboot项目打包
对于Vue和Spring Boot项目的打包,可以分别进行打包,然后将它们合并到一个文件夹中即可。
对于Vue项目的打包,可以使用以下命令:
```
npm run build
```
该命令将生成一个dist文件夹,其中包含了打包后的Vue项目文件。
对于Spring Boot项目的打包,可以使用以下命令:
```
mvn clean package
```
该命令将生成一个target文件夹,其中包含了打包后的Spring Boot项目文件。
将这两个文件夹合并到一个文件夹中,然后将该文件夹打包即可。可以使用以下命令将它们合并到一个文件夹中:
```
cp -r /path/to/vue/dist/* /path/to/spring/boot/src/main/resources/static/
```
这将把Vue项目的打包文件复制到Spring Boot项目的静态资源文件夹中。然后使用以下命令打包整个项目:
```
mvn clean package
```
这将生成一个可执行的jar文件,其中包含了Vue和Spring Boot项目的所有文件。
vue打包后放到springboot
1. 在Vue项目中运行 `npm run build` 命令,该命令会将Vue项目打包成静态文件。
2. 将打包后的文件夹(dist文件夹)复制到Spring Boot项目的src/main/resources/static目录下。
3. 在Spring Boot项目中创建一个Controller用于返回Vue静态页面,示例代码如下:
```
@RestController
public class ViewController {
@GetMapping("/")
public String index() {
return "index";
}
}
```
4. 在Spring Boot项目中配置静态资源访问路径,示例代码如下:
```
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/static/");
}
}
```
5. 启动Spring Boot项目,在浏览器中访问`http://localhost:8080`即可访问Vue打包后的静态页面。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)