最近由于工作要求：前端采用vue開(kāi)發(fā)，后端采用springboot開(kāi)發(fā)，前后端分離開(kāi)發(fā)，最后前端頁(yè)面又整合到后端來(lái)。經(jīng)歷多次采坑，總結(jié)以下方案：

vue build后的文件部署到springboot目錄

vue打包后，會(huì)生成dist目錄

springboot靜態(tài)資源目錄如下：

SpringBoot處理靜態(tài)資源和頁(yè)面，設(shè)置如下：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
 	registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
	super.addResourceHandlers(registry);
}

頁(yè)面模板設(shè)置，如下：

#頁(yè)面模板設(shè)置
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打包后vendor文件過(guò)大的優(yōu)化方案

vue使用vue-cli打包后，vendor就將vue.js其他引用的包一起壓縮打包進(jìn)去，導(dǎo)致vendor文件超過(guò)1M，影響頁(yè)面加載速度
本項(xiàng)目使用了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）打包時(shí)，排除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',
  },
  ...
}

這里有注意的是：命名問(wèn)題
比如：vue-router的在https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js中默認(rèn)采用VueRouter，所以在import vue-router一定要使用VueRouter，而不能使用其他別名。

vue默認(rèn)別名是Vue
axios默認(rèn)別名是axios
vue-router默認(rèn)別名是VueRouter
iview默認(rèn)別名是iview
echarts默認(rèn)別名是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的路由頁(yè)面設(shè)置為按需加載

export default new VueRouter({
 mode: 'history',
 routes: [
  //頁(yè)面1
  {
   path: '/Page1',
   name: 'page1',
   component: () => import('@/views/Page1.vue')
  },
  //頁(yè)面2
  {
   path: '/Page2',
   name: 'page2',
   component: () => import('@/views/Page2.vue')
  }
 ]
 });

（4）重新打包后vendor.js文件就小了，可以小到1k哦

vue-router使用了history模式，vue其實(shí)做的是單頁(yè)面應(yīng)用，但是效果看上去是多個(gè)不同頁(yè)面，問(wèn)題來(lái)了，部署到線上環(huán)境后，該如何配置？

百度上有很多處理方案，比如：使用errorPage方式處理，nginx配置等，這些問(wèn)題比較繁瑣，而且在部署過(guò)程中，一堆問(wèn)題。
經(jīng)過(guò)多次嘗試，發(fā)現(xiàn)有一個(gè)最簡(jiǎn)單方法，Controller直接url路徑配置到index.html即可，而且輕松解決history模式帶來(lái)的后端問(wèn)題，如下：

@ApiOperation(value = "", hidden = true)
@RequestMapping(path = "/Page1")
public String page1() {
  return "index";
}

@ApiOperation(value = "", hidden = true)
@RequestMapping(path = "/Page2")
public String page2() {
  return "index";
}

這種方案非常有利于后端開(kāi)發(fā)人員做更多的進(jìn)一步操作，比如：給每個(gè)頁(yè)面增加頁(yè)面權(quán)限等。
注意：該方案目前適用于前端頁(yè)面整合到后端的項(xiàng)目工程。

到此這篇關(guān)于SpringBoot集成vue的開(kāi)發(fā)解決方案的文章就介紹到這了,更多相關(guān)SpringBoot集成vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論