Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

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

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
},

`


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...