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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vue 组件简介
Jul 31 Javascript
Openlayers绘制聚合标注
Sep 28 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
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
基于php缓存的详解
2013/05/15 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
js初始化验证实例详解
2016/11/26 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
详解Python的循环结构知识点
2019/05/20 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Django通过json格式收集主机信息
2020/05/29 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Linux内核产生并发的原因
2016/11/08 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
初中校园之声广播稿
2014/01/15 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
vue里使用create, mounted调用方法
2022/04/26 Vue.js