springboot怎么使用vue打包过的页面资源 - 行业资讯 - 肥雀云

介绍

这篇文章将为大家详细讲解有关springboot怎么使用vue打包过的页面资源,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

vue的优点

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

这篇文章主要介绍了springboot如何使用vue打包过的页面资源,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

(一)webpack打包

如果在vue基于webpack的,构建打包后得到的是如下的资源文件:

webstorm中提示如下:

这个大致的意思就是这边的文件需要放在http服务器上访问,如果直接打开的话,无法生效。

道理也很简单,基本上这里面引的路径都是服务器的路径。

(二)后端springboot项目

在属性文件里面设置spring.resources.static-locations=类路径:/dist

spring.resources。static-locations的默认值是:类路径://meta - inf/资源,类路径://资源,类路径:/静态,类路径:/公共/

区别:spring.mvc.static-path-pattern,这个配置的意思是什么样的路径,才到spring.resources。static-locations中查找静态文件,默认的配置就是/* *,就是全部的路径

如:spring.mvc。static-path-pattern=/静态/* *,当访问/静态/css/demo.css时,会拿/css/demo.css到spring.resources.static-locations配置的目录中去查找。

测试下访问静态文件:

http://localhost: 9999/静态/css/app.30790115300ab27614ce176899523b62.css

可以返回。

访问指数。html:

关于“springboot怎么使用vue打包过的页面资源”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。