使用SpringBoot与vue怎么开发一个项目?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
vue build后的文件部署到springboot目录
vue打包后,会生成dist目录
springboot静态资源目录如下:
SpringBoot处理静态资源和页面,设置如下:
@Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); super.addResourceHandlers(registry); }
页面模板设置,如下:
#页面模板设置 spring.thymeleaf.option=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.cache=false
部署方案:
dist的index.html 直接放在templates目录下
dist的css、fonts、img、js 直接放在static目录下
vue使用vue-cli打包后,vendor就将vue.js其他引用的包一起压缩打包进去,导致vendor文件超过1M,影响页面加载速度
本项目使用了vue、vue-router、iview、axios、echarts等
(1)使用vue、vue-router、iview、axios、echarts等cnd引用
在index.html文件中,增加:
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script> <script src="https://unpkg.com/iview@3.4.0/dist/iview.min.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script> <script src="https://unpkg.com/echarts@4.2.1/dist/echarts.min.js"></script>
(2)打包时,排除vue、vue-router、iview、axios、echarts等打包
在webpack.base.conf.js文件中,module.exports={…} 方法中添加
module.exports = { ... externals:{ 'vue':'Vue', 'axios':'axios', 'vue-router':'VueRouter', 'iview':'iview', 'echarts':'echarts', }, ... }
这里有注意的是:命名问题
比如:vue-router的在https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js中默认采用VueRouter,所以在import vue-router一定要使用VueRouter,而不能使用其他别名。
vue默认别名是Vue
axios默认别名是axios
vue-router默认别名是VueRouter
iview默认别名是iview
echarts默认别名是echarts
例子:
import Vue from 'vue' import VueRouter from 'vue-router' import iview from 'iview' import echarts from 'echarts' Vue.use(VueRouter) export default new VueRouter({ mode: 'history', ... })
(3)vue-router的路由页面设置为按需加载
export default new VueRouter({ mode: 'history', routes: [ //页面1 { path: '/Page1', name: 'page1', component: () => import('@/views/Page1.vue') }, //页面2 { path: '/Page2', name: 'page2', component: () => import('@/views/Page2.vue') } ] });
(4)重新打包后vendor.js文件就小了,可以小到1k哦
百度上有很多处理方案,比如:使用errorPage方式处理,nginx配置等,这些问题比较繁琐,而且在部署过程中,一堆问题。
经过多次尝试,发现有一个最简单方法,Controller直接url路径配置到index.html即可,而且轻松解决history模式带来的后端问题,如下:
@ApiOperation(value = "", hidden = true) @RequestMapping(path = "/Page1") public String page1() { return "index"; } @ApiOperation(value = "", hidden = true) @RequestMapping(path = "/Page2") public String page2() { return "index"; }
看完上述内容,你们掌握使用SpringBoot与vue怎么开发一个项目的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。