vue-router启用history模式下的开发及非根目录部署方法


Posted in Javascript onDecember 23, 2018

 为什么要有 hash 和 history

对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。

为了达到这一目的,浏览器当前提供了以下两种支持:

1.hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。

比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,“#”后面的内容不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

vue-router 的 history 模式是个提高颜值的好东西,没有了 hash 的路由看起来清爽许多。

开发的时候,如果我们使用 devServer 来启动服务,由于一般不共用端口,我们一般不存在非根目录的问题。

而刷新后 404 的问题可以借助 historyApiFallback 来解决。

但当我们项目对外开放时,往往无法在域名根目录下提供服务,这个时候资源的访问路径与开发时的根目录就有了区别。

首先,我们通过 webpack 来配置一下项目中所有资源的基础路径,让这份代码在开发和生产环境中都可以正确找到资源。

// config/index.js
module.exports = {
  dev: {
    ...
    // 开发环境根目录 - 服务根目录 - 绝对路径
    assetsPublicPath: '/'
    ...
  },
  build: {
    ...
    // 生产环境根目录 - 服务器访问路径 - 绝对路径
    assetsPublicPath: '/test/project1/'
    ...
  }
}

 
// build/webpack.common.conf.js
const config = require('../config')
module.exports = {
  output: {
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }
}

// build/webpack.dev.conf.js
const common = require('./webpack.common')
module.exports = merge(common, {
  devServer: {
    historyApiFallback: true
  }
}

然后在提供服务的服务器配置中做如下配置(以 nginx 为例):

location /test/project1 {
    alias .../project1; // 项目的真实路径
    index index.html;
    try_files $uri $uri/ /test/project1/index.html;
}

try_files 会按顺序检查参数中的资源是否存在,并返回第一个找到的资源,如果都没有找到,它会让 nginx 内部重定向到会后一个参数。

对了,所以它的的作用是解决刷新 404 的问题。

这里值得注意的是 try_files 的参数是绝对路径。

至此,你开启 history 模式的项目就可以顺利的跑在任何路径了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 #Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 #Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 #Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 #Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
JavaScript时间日期操作实例小结【5个示例】
Dec 22 #Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 #Javascript
You might like
curl实现站外采集的方法和技巧
2014/01/31 PHP
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python加载自定义词典实例
2019/12/06 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
社会公德演讲稿
2014/05/20 职场文书
酒店员工培训方案
2014/06/02 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript