时间: 2019-08-15|tag:172次围观|0 条评论

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_32961235/article/details/81457777

  由于特殊原因,所以临危受命将vue集成到springboot的项目中,终于在忙活了一天之后成功搞定,下面就分享一下这次的集成过程:

 1创建springboot和vue项目

           springboot以及vue项目都已经由前后端同事分别开发完成,这里就不介绍具体的创建过程了;

2.打包vue项目

vue使用了vue-cli,因此目录结构如下

springboot项目集成vue插图

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文件夹中

springboot项目集成vue插图1

将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了。

 

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《springboot项目集成vue
   

还没有人抢沙发呢~