故事背景:用vue3.0创建一个vue项目,用于开发微信公众号。并且我要把这个项目放在nginx的子路径
并且这个你得要了解一下:获取用户code的时候需要跳转到微信的页面,然后微信再返回自己的页面,并且附带code,这个code就可以获取用户信息了。不知道也没关系,就是需要从页面url中获取一个参数而已
假设有个路径:www.abcd.com/ 并且由nginx转发到服务器的本地静态网页文件
事情开始了,我把项目部署在主目录没问题,使用的路由方式是history,并且code参数可以获取。
问题来了,我把项目放到www.abcd.com/gzh/ 下面,路由方式:history,就页面空白了,并且没有404,js,css资源文件都是200。
网上提供两个方式:
1根据官网提醒,需要修改这个配置,看这里 。如果部署在子目录上需要修改一些配置,按照官方提供的方式无效,至少我这里无效,第二种有点用
2.把history改成hash模式,果然有用。
但也不是完全有用...
微信返回我的地址是:www.abcd.com/gzh/?code=1…
这样就可以获取code进行下一步了,可是vue确自动把我url加上了#变成了:
这样我的code就获取不到了,我是用vue的router获取的
非常难受
于是我用Js原生方法获取到code
const url = document.location.toString()
const urlEnd = url.split('code=')[1]
let code = urlEnd.substr(0, urlEnd.indexOf('#')) // #可能要修改成$ 看你自己微信返回的url
就这样,其他一些问题我也不太清楚,我是这样解决的