问答

vue-router hash模式改成history模式,页面无法访问(非后台配置

作者:admin 2021-06-27 我要评论

hash模式下 yarn serve之后启动项目 ` http://localhost :8080/zh/#/index ` 此路径可以直接访问 因为项目要求 必须要有 zh路径 但是因为要干掉# 跟pc的统一起来...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

hash模式下

yarn serve之后启动项目

`
http://localhost:8080/zh/#/index
`

此路径可以直接访问

因为项目要求 必须要有 zh路径

但是因为要干掉# 跟pc的统一起来 因此要改成history模式

改成history模式之后

再次启动项目 打开浏览器就是

`
http://192.168.1.197:8080/zh/
`

只显示 头部 跟 footer 中间的内容没有了

但是如果手动改成

`
http://192.168.1.197:8080/index
`

页面正常访问

vue.config.js中配置了

`
publicPath:"/zh",
`

期望解决这个问题

改成histroy模式之后 可以直接访问

`
http://192.168.1.197:8080/zh/index
`

router.js的路由配置

`

 {
  path: '/index',
  name: 'Index',
  component: Index
},
{
  path: '/search',
  name: 'Search',
  component: Search
},
{
  path: '/dentailbase',
  name: 'Dentailbase',
  component: Dentailbase
},
{
  path: '/newscenter',
  name: 'Newscenter',
  component: Newscenter,
  meta:{
    keepAlive:true
  }
},
{
  path: '/newsdentail',
  name: 'Newsdentail',
  component: Newsdentail
},
{
  path: '/activelist',
  name: 'Activelist',
  component: Activelist,
  meta:{
    keepAlive:true
  }
},
{
  path: '/activelistdentail',
  name: 'Activelistdentail',
  component: Activelistdentail
},
{
  path: '/intertclasslist',
  name: 'Intertclasslist',
  component: Intertclasslist,
  meta:{
    keepAlive:true
  }
},
{
  path: '/contactus',
  name: 'Contactus',
  component: Contactus
},
{
  path: '/intertclassdentail',
  name: 'Intertclassdentail',
  component: Intertclassdentail,
  redirect:'/intertclassdentail/description',
  children:[
    // 课程说明
    {
      path:'description',
      component:Description
    },
    // 课程视频
    {
      path:'video',
      component:Video
    },
    // 课程说明
    {
      path:'comment',
      component:Comment
    },
  ]
  
},
{
  path: '/videodentail',
  name: 'Videodentail',
  component: Videodentail
},
{
  path: '/cooperationexchange',
  name: 'Cooperationexchange',
  component: Cooperationexchange,
  meta:{
    keepAlive:true,
  }
},
{
  path: '/cooperationdentail',
  name: 'Cooperationdentail',
  component: Cooperationdentail
},
{
  path: '/login',
  name: 'Login',
  component: Login
},
{
  path: '/messagelogin',
  name: 'Messagelogin',
  component: Messagelogin
},
{
  path: '/forgotPwd',
  name: 'ForgotPwd',
  component: ForgotPwd
},

`

###

因为有项目要求所以router需要设置baserouter base默认值是'/',像你这种情况需要设置为{base:'/zh/'}
具体可以参考官方文档
https://router.vuejs.org/zh/a...

###

在hash模式下访问http://localhost:8080/123/#/index 其实也是可以访问到的
我的理解是 publicPath的意义在于 构建后去哪个路径拿js css这些文件
这也是很多人第一次打包后遇到的问题 找不到静态文件 所以把这个路径改成相对路径'./'后就可以正常打开页面了
按你的需求,其实把路由配置的path遍历添加前缀就可以了
欢迎指正

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue-router hash模式改成history模式,

    vue-router hash模式改成history模式,

  • .net stateless状态机引擎如何生成中文

    .net stateless状态机引擎如何生成中文

  • wangeditor

    wangeditor

  • vue-element ui 表格嵌套表格父子勾选

    vue-element ui 表格嵌套表格父子勾选

腾讯云代理商
海外云服务器