一些个人在vue构建项目中的router配置和webpack改动,仅在vue-cli 3.0版本下有效


## vue-router 在项目初始化过程中,会涉及到配置路由，而在使用vue-router的过程中，需要注意vue的两种路由模式，一个是默认的hash路由，另一个是history路由。


1. hash路由在路径后会带有一个#/
例如:localhost:8080/#/


2. 而history路由则会将路径后的#/去掉,
例如:localhost:8080/


具体配置信息如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
在router.js文件中,添加
mode:'history',
base:'xxx'
这两行代码

export default new Router({
  mode: 'history',
  base: '/xxx/',
  routes: [
  ...
  ]
})


上述base:'xxx'中的xxx是在vue-cli创建的文件中的config文件夹下的index.js文件中,build这一行里进行配置的,找到该文件进行如下配置:

1
2
3
4
5
6
7
8
9
10
11
build{
    // Template for index.html
    index: path.resolve(__dirname, '../xxx/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../xxx'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/xxx/',
    
    ...
}


---

## 12.4日补充

在使用vue-router模式进行页面切换时,会发现有时候,页面出现的位置并不是顶部,而是在其他位置,可以通过scrollBehavior这一函数去修改跳转路由后的页面初始位置。


此方法仅在’histroy’模式下有用


在router文件夹内的index.js文件添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
export default new Router({
  mode: 'history',
  base: '/xxx/',
  routes: [
  ...
  ],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    
    // 1. return { x:0, y:0} 跳转路由后回到页面顶部
  }
})


---
## 12.21补充 微信H5分享存在的问题: 1. SPA应用History模式,由于每次路由并不会刷新,会导致获取微信签名失败,所以在SPA应用History模式下,想要做到多页面均可分享,需启用Hash路由模式. 参考(@yongheng2016的github分享):[微信分享过程中遇到的问题总结（SPA/history模式）](https://github.com/yongheng2016/blog/issues/78) 如: 
1
2
3
4
5
6
...
{
mode:'hash',
base:'xxx',
...
}
  1. 目前项目是用Hash路由解决了多页面分享的问题,下次碰到问题再解决

__END__

o0Chivas0o
文章作者：o0Chivas0o
文章出处：Vue-Router、webpack个人配置
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处