• 在使用 vue 进行项目开发中,默认的路由形式是 hash,表现形式就是 url 中始终带有 # 号,在后台管理类的项目中并不影响使用,但是在特殊场景,比如微信分享的H5链接中,微信会自动拼接参数,由于 # 的原因,路径中会出现两段由 ? 拼接的部分,为避免这种情况,形成较为规范的 url 形式,可以采用 history 模式
// 路由文件 index.js
const router = new VueRouter({
mode: 'history',
base: '/aa/',
routes
})
// vue.config.js
module.exports = {
publicPath: '/aa/', // 基本路径
}
  • base 和 publicPath 路径保持一致,值就是服务器域名下的文件夹目录,比如:www.xxxx.com/aa/,如果是根目录,直接写为 /
  • 配置 history 模式需要服务器支持,服务器具体配置见官网 后端配置

vue 中 history 模式的配置和打包的更多相关文章

  1. vue路由history模式,nginx配置

    nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...

  2. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  3. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  4. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  5. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

  6. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  7. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  8. Vue中hash模式和history模式的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...

  9. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

随机推荐

  1. 《仙剑奇侠传柔情版》Java的简单实现(二)

    基于<仙剑奇侠传柔情版>Java的简单实现(二) 2018-12-02 by Kris 需要上次的GameFrame.class中窗口框架承载:https://www.cnblogs.co ...

  2. 【简说Python WEB】Web应用部署

    目录 [简说Python WEB]Web应用部署 应用层 缓存层 数据层 Gunicorn 的应用 1.安装Gunicorn 2.Gunicorn的启动 Nginx 的应用 1.docker方式部署安 ...

  3. .net core 依赖注入, autofac 简单使用

    综述 ASP.NET Core  支持依赖注入, 也推荐使用依赖注入. 主要作用是用来降低代码之间的耦合度. 什么是控制反转? 控制反转(Inversion of Control,缩写为IoC),是面 ...

  4. SpringBoot怎么自动部署到内置的Tomcat的?

    先看看SpringBoot的主配置类的main方法: main方法运行了一个run()方法,进去run方法看一下: /** * 静态帮助程序,可用于从中运行{@link SpringApplicati ...

  5. 树莓派4B踩坑指南 - (13)用samba建立家庭局域网共享中心

    树莓派在家中至少三个作用:家庭资源共享中心.无线打印服务器.下载服务器. 家庭资源共享中心用samba实现家庭局域网共享,树莓派4B的话可以接2个3.0的移动硬盘. 实测速度不快,Win读2Mb/s写 ...

  6. 嘉泽 P2120: 【基础】半质数 题解

    原题链接 简要题意: 求区间内能分解为两个质数乘积的数. 欧拉筛先筛素数. 然后再筛答案. 时间复杂度: \(O(n)\). 实际得分:\(100pts\). #pragma GCC optimize ...

  7. 李宏毅老师机器学习课程笔记_ML Lecture 3-1: Gradient Descent

    引言: 这个系列的笔记是台大李宏毅老师机器学习的课程笔记 视频链接(bilibili):李宏毅机器学习(2017) 另外已经有有心的同学做了速记并更新在github上:李宏毅机器学习笔记(LeeML- ...

  8. Python第五章-内置数据结构03-元组

    Python 内置的数据结构 三.元组(tuple) python 作为一个发展中的语言,也提供了其他的一些数据类型. tuple也是 python 中一个标准的序列类型. 他的一些操作和str和li ...

  9. OpenCV-Python Meanshift和Camshift | 四十七

    学习目标 在本章中, 我们将学习用于跟踪视频中对象的Meanshift和Camshift算法. Meanshift Meanshift背后的直觉很简单,假设你有点的集合.(它可以是像素分布,例如直方图 ...

  10. Docker笔记(十三):容器日志采集实践

    日志是服务运行过程中的一个关键环节,借助日志,我们可以排查定位问题,也可以借助集中化的日志管理平台(如ELK)来做一些必要的数据统计分析.在Docker环境中,日志的采集比传统环境更为复杂,因此了解D ...