• 在使用 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. 我的Keras使用总结(1)——Keras概述与常见问题整理

    今天整理了自己所写的关于Keras的博客,有没发布的,有发布的,但是整体来说是有点乱的.上周有空,认真看了一周Keras的中文文档,稍有心得,整理于此.这里附上Keras官网地址: Keras英文文档 ...

  2. linux 执行计划任务crontab

    crontab 一些常用的命令 service crond start //启动服务 service crond stop //关闭服务 service crond restart //重启服务 se ...

  3. Natas26 Writeup(PHP反序列化漏洞)

    Natas26: 打开页面是一个输入坐标点进行绘图的页面. <html> <head> <!-- This stuff in the header has nothing ...

  4. 解决Requires: libc.so.6(GLIBC_2.14)(64bit)错误解决方法

    glibc简介: glibc是GNU发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc.glibc除了封装linux操作系统所提供的系统服 ...

  5. [BJDCTF 2nd]fake google

    [BJDCTF 2nd]fake google 进入页面: 试了几下发现输入xxx,一般会按的格式显示, P3's girlfirend is : xxxxx 然后猜测会不会执行代码,发现可以执行 & ...

  6. laravel的中间件创建思路

    网上有很多解析laravel中间件的实现原理,但是不知道有没有读者在读的时候不明白,作者是怎么想到要用array_reduce函数的? 本文从自己的角度出发,模拟了如果我是作者,我是怎么实现这个中间件 ...

  7. 牛客练习赛60 A—F题解(缺E题)

    本蒟蒻这次只过了三题 赛后学习了一下出题人巨佬的标码(码风比我好多了 贴的代码有些是仿出题人)现在将自己的理解写下来与大家分享 A这个题一分析就是每个数字都会与所有数字&一下 (a&a ...

  8. 使用Python中的NLTK和spaCy删除停用词与文本标准化

    概述 了解如何在Python中删除停用词与文本标准化,这些是自然语言处理的基本技术 探索不同的方法来删除停用词,以及讨论文本标准化技术,如词干化(stemming)和词形还原(lemmatizatio ...

  9. 一书吃透机器学习!新版《机器学习基础》来了,教材PDF、PPT可下载 | 资源

    不出家门,也能学习到国外高校的研究生机器学习课程了. 今天,一本名为Foundations of Machine Learning(<机器学习基础>)的课在Reddit上热度飙升至300, ...

  10. 扩展KMP(记录学习过程)

    首先看了几篇博客,发现还得耐下心来理解,动手画图 ,才能理解俩字符串还有数组之间神奇的关系 这篇博客图不错:https://segmentfault.com/a/1190000008663857 /* ...