springboot项目集成vue
由于特殊原因,所以临危受命将vue集成到springboot的项目中,终于在忙活了一天之后成功搞定,下面就分享一下这次的集成过程: 1创建springboot和vue项目 springboot以及vue项目都已经由前后端同事分别开发完成,这里就不介绍具体的创建过程了;2.打包vue项目vue使用了vue-cli,因此目录结构如下1) 修改config...
·
由于特殊原因,所以临危受命将vue集成到springboot的项目中,终于在忙活了一天之后成功搞定,下面就分享一下这次的集成过程:
1创建springboot和vue项目
springboot以及vue项目都已经由前后端同事分别开发完成,这里就不介绍具体的创建过程了;
2.打包vue项目
vue使用了vue-cli,因此目录结构如下
1) 修改config下的index.js
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'assets',
assetsPublicPath: '/',
其中最后2句是访问静态资源的路径,例如上图的代码访问路径就是localhost:8080/assets/xxxx;
2)打包vue
npm run build
最后出现 Build complete.则是打包成功
这时根目录下会出现dist文件夹,这个就是打包后的文件
3.配置springboot项目
1)将vue放入springboot项目中
将刚才生成的dist文件夹中的index.html放入到templates文件夹中
将assets中的静态资源放入到上图的assets中
2)修改springboot的静态资源引用路径
registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/").setCacheControl(CacheControl.noCache());
3)写一个跳转的接口
@RequestMapping("/")
public String index(Model model, User user) {
return "index";
}
这样输入localhost:8080即可运行springboot项目中的vue了。
更多推荐
已为社区贡献1条内容
所有评论(0)