VUE项目未部署前可以路由跳转访问各个组件,部署到SpringBoot后出现Whitelabel Error Page错误?

新手上路,请多包涵

问题大概能定位到是SpringBoot把页面跳转的url当成请求去执行导致的Whitelabel Error Page错误。
在vue未部署时可以根据url去路由跳转达到切换不同的component。部署到SpringBoot后只有"/"可以访问。其余的都无法访问。在线坐等求助

//router.js
import Vue from 'vue'
import Router from 'vue-router'
import OOTmnlCollRateAnaly from '../components/appList/objectOrientedTmnlCollRateAnaly'
import speLineCollDeAll from '../components/appList/speLineCollDeAll'
import speLineCollDeEach from '../components/appList/speLineCollDeEach'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'mainPage',
      component: OOTmnlCollRateAnaly,
    },
    {
      path: '/tmnlCollAnaly',
      name: 'tmnlCollAnaly',
      component: OOTmnlCollRateAnaly
    },
    {
      path: '/speLineCollDeAll',
      name: 'speLineCollDeAll',
      component: speLineCollDeAll
    },
    {
      path: '/speLineCollDeEach',
      name: 'speLineCollDeEach',
      component: speLineCollDeEach
    }
  ],
  mode:'history' //去掉路径的'#'
})
//main.js 程序入口文件,是初始化vue实例并使用需要的插件,加载各种公共组件.
import Vue from 'vue' //引入模块vue
import VueRouter from 'vue-router'
import router from './router/router' //引入route文件
import ElementUI from 'element-ui'//引入模块element
import 'element-ui/lib/theme-chalk/index.css' //这里引入饿了么的UI框架
import componentsContainer from './components/componentsContainer.vue'

import vue_header_public from './components/header/header.vue'

Vue.config.productionTip = false  //对引入的vue模块进行设置

Vue.use(VueRouter)
Vue.use(ElementUI)

new Vue({
  el: '#vue_header_public',
  components: { vue_header_public },
  template: '<vue_header_public/>'
})

new Vue({
  router,
  el:'#componentsContainer',
  render:h =>h(componentsContainer)
})
//页面中跳转的方法
    methods: {
      openPageOOBTmnlAnalysis: function ()
      {
        window.location.href="tmnlCollAnaly";
      },
阅读 6.4k
2 个回答

SpringBoot静态资源配置设置为:如果当前请求路径找不到静态资源则返回/index.html

以下是nginx配置,SpringBoot也是同样的原理

location / {
    try_files $uri /index.html;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏