Vue-cli创建项目从单页面到多页面2-history模式
2017-11-27 20:16
1501 查看
之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式。
但是如果只是这样使用的话,在本地开发时,有一个问题,那就是当你访问其他页面的时候,只能使用xxx/pagename.html 这种方式访问,而不是xxx/xxx2/xxx3等方式,直接刷新后,并不能定位到你预期的pagename.html,反而会定位到index.html(因为默认会定位到这里);
// SPA应用浏览器回退支持配置
官方使用文档见github:https://github.com/bripkens/connect-history-api-fallback
我的vue多页面系列的其他博客链接:
Vue-cli创建项目从单页面到多页面
Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
如何使用history模式
因为vue默认的hash模式的url有些丑,所以我们可以在路由的配置中添加如下配置:import Router from 'vue-router'; new Router({ mode: 'history' // 这样设置后,就可以去掉url中丑丑的“#”啦 });
但是如果只是这样使用的话,在本地开发时,有一个问题,那就是当你访问其他页面的时候,只能使用xxx/pagename.html 这种方式访问,而不是xxx/xxx2/xxx3等方式,直接刷新后,并不能定位到你预期的pagename.html,反而会定位到index.html(因为默认会定位到这里);
解决方案
在build/dev-sever.js中,我们可以通过connect-history-api-fallback 模块修改,修改方式如下:// SPA应用浏览器回退支持配置
var rewrites = { rewrites: [{ from: '/home/', // 正则或者字符串 to: '/home/index.html', // 字符串或者函数 }] }; // handle fallback for HTML5 history API app.use(require('connect-history-api-fallback')(rewrites));
官方使用文档见github:https://github.com/bripkens/connect-history-api-fallback
我的vue多页面系列的其他博客链接:
Vue-cli创建项目从单页面到多页面
Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
相关文章推荐
- Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
- Vue-cli创建项目从单页面到多页面的方法
- vue +vue-cli+vue router ,npm run build 打包完页面空白,不显示URL的#号router模式为history
- vue-cli创建的项目,配置多页面的方法
- vue-cli创建的项目,配置多页面的实现方法
- 详解如何将 Vue-cli 改造成支持多页面的 history 模式
- Vue-cli创建项目从单页面到多页面
- Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
- vue-cli+webpack记事本项目创建
- 如何使用vue-cli创建项目
- Vue-cli 创建项目关于资源路径问题
- 用npm安装vue和vue-cli,并使用webpack创建项目
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
- 使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别
- 在nginx上部署vue项目(history模式)的方法
- vue-cli创建的项目的目录结构及说明
- Vue-cli脚手架构建多页面项目
- 利用vue-cli创建Vue项目
- 【vue】如何在 Vue-cli 创建的项目中引入iView
- 基于vue-cli创建的项目的目录结构及说明介绍