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 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
javascript文本模板用法实例
Jul 31 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
小程序实现人脸识别功能(百度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
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
详解JavaScript树结构
2017/01/09 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
利用Python实现kNN算法的代码
2019/08/16 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
NET程序员上机面试题
2015/05/23 面试题
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
入队仪式主持词
2015/07/04 职场文书
入党后的感想
2015/08/10 职场文书
初中信息技术教学反思
2016/02/16 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python