vue项目的mode:history模式打包空白

Vue-router 中有hash模式和history模式,vue的路由默认是hash模式,一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染。简单介绍下两种模式:

hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
因此可以说,hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由.
使用场景

一般场景下,hash 和 history 都可以,除非你更在意颜值,# 符号夹杂在 URL 里看起来确实有些不太美丽。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。

我最初用的是hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉,需要将带参的url作为一个参数传给后台,后台取不到#后面的东西)在后面需要开发微信支付、分享,授权登录等就暴露出了问题,所以就需要使用history模式。只需在router文件夹下的index.js中加入

mode: ‘history’,

但history模式打包后出现页面一片空白的情况,而且没有资源加载错误的报错信息.

1.首先你需要确认页面空白不是由资源文件路径不正确引起的,如果资源找不到就将绝对路径改为相对路径,我博客中页有记录。

2.在资源文件能正常加载的情况下还是空白页面,查看资源加载的路径,我资源加载路径是http://xxx.com/dist,我的是将打包生成的dist文件夹直接放到了public下,没有将dist文件里面的static文件夹和index.html放到public下,所以出现http://xxx.com/dist,后面还有dist,估计是这个原因。
vue项目的mode:history模式打包空白_第1张图片
如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base

// base: '/history',
// mode: 'history',

这个base即为项目路径.我的是在在router文件夹下的index.js加入

base: '/dist'
vue项目的mode:history模式打包空白_第2张图片

这是因为router无法找到路径中的组件,所以也就无法渲染了。然后再修改router中的index.js,给每一个component加上name。

3.然后就是后端的配合,在文档中有说明,照着改就好了,https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

接着说一下微信支付,也是因为凡是涉及充值的页面,不能做成带hash路由的的页面!,于是也要用history模式

/**此处是改成history模式后,但是不能刷新,一刷新,然后就找不到页面,公司要求是要有当前页面的刷新功能,还要有直接通过链接跳转到指定页面的功能,显然history模式是不符合要求的,所以还得用hash模式,改回hash模式后,支付页面竟然可以支付了,应该是微信公众号配置的路径域名后加上了dist,vue项目router文件夹下的index.js加入base: '/dist’的缘故/

然后微信公众号支付,前台向服务器端发起ajax请求,服务器端组装支付参数,然后返回给前台,前端发起支付报错,

1.支付缺少参数:appId

发现WeixinJSBridge.invoke()方法要求传入的是一个对象,并且参数要分开写,不能一个对象传进去,如下
vue项目的mode:history模式打包空白_第3张图片

你可能感兴趣的:(Vue,vue)