共计 845 个字符,预计需要花费 3 分钟才能阅读完成。
最近要把一个 spirngboot 项目和 vue 整合一下。于是百度了一下,大部分的教程都是 build 前端 vue 项目,然后把生成的 dist 目录下的文件拷贝到 resources 下的 static 下即可,但是按照以上教程实际上项目启动后无法正常访问。在摸索了一段时间之后,总结如下,
首先看下整合后的目录结构
之后我们看下具体的教程步骤
编译前端工程
使用下面命令编译 vue 工程
npm run build
编译后文件目录如下
拷贝文件到 springboot 目录
将 static 下是 css、fonts、img、js 拷贝到 springboot 项目的 /resources/static 目录下
将 index.html 文件拷贝到 springboot 项目的 /resources/templates 目录下
新增 IndexController
@Controller
@RequestMapping("")
public class IndexController {@RequestMapping("/index")
public String index() {return "index";}
}
此 controller 的作用是在访问项目的 /index 路劲时,能够跳转到 index.html
新增静态资源映射
@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}
这样就能解决静态资源无法访问的问题
启动 springboot 项目
在上述步骤都完成之后,启动 springboot 项目。以本地为例,浏览器访问 http://localhost:8080/index 即可
正文完
发表至: javascript
2019-09-10