Vue-cli创建项目从单页面到多页面2-history模式
之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式。
如何使用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创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
Vue-cli创建项目从单页面到多页面2-history模式的更多相关文章
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- vue/cli创建项目过程
①vue create demo vue版本:3.9.3,node版本:12.8.0 ②Manually select features ③Bab ...
- Vue-cli创建项目从单页面到多页面
vue-cli创建项目从单页面到多页面 对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm i ...
- Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在. 这个时候,有两种方案可以比较快的解决: 1.利用h5的特性,使用cors,在ngni ...
- Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
关于将打包后的项目文件不放在根目录下 有时候,我们总是需要这样的设置:希望将打包后的文件放在a.b.com/somepath/这样一个路径下. 然而在vue-cli创建的项目中,默认的打包路径中的静态 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 初学Vue.js,用 vue ui 创建项目会不会被鄙视
全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
随机推荐
- Object类—复写equals方法,hashCode方法,toString方法
Object:所有类的根类. Object是不断抽取而来,具备着所有对象都具备的共性内容. class Person extends Object { private int age; Person( ...
- AspxGridView控件的使用
在网上找到的不错的资料: http://www.lmwlove.com/ai/SubjectID6 以下是自我总结: 要实现的功能:使用AspxGridView显示Scott数据库中emp与dept两 ...
- JS前端三维地球渲染——中国各城市航空路线展示
前言 我还从来没有写过有关纯JS的文章(上次的矢量瓦片展示除外,相对较简单.),自己也学习过JS.CSS等前端知识,了解JQuery.React等框架,但是自己艺术天分实在不过关,不太喜欢前端设计,比 ...
- vue 父组件传递子组件事件
在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...
- Google Guava
公司用到了 Joiner HashMultimap 等 都是属于Google Guava包中的东西 官方文档 http://ifeve.com/google-guava/ 有时间了整理一下
- 2_认识STM32库
2_认识STM32库 STM32库是由ST公司针对STM32提供的函数接口API,开发者可以调用这些函数接口来配置STM32的寄存器,使得开发人员得以脱离最底层的寄存器操作,开发快速. 库是架设在寄存 ...
- js返回到上一个页面刷新与不刷新的写法
返回上个页面刷新: <script>window.location.href=document.referer</script> 返回上个页面不刷新 <script> ...
- Paint the Grid Again (隐藏建图+优先队列+拓扑排序)
Leo has a grid with N × N cells. He wants to paint each cell with a specific color (either black or ...
- Surround the Trees(凸包)
Surround the Trees Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 第十一章 多GPU系统的CUDA C
本章介绍了 显存和零拷贝内存的拷贝与计算对比 #include <stdio.h> #include "cuda_runtime.h" #include "d ...