VUE项目H5页面在微信中遇到的坑

首先说一下载微信的JS-SDK中,官方文档说的很清楚,需要确认url的完整性,使用的是location.href.split(’#’)[0],而VUE项目中默认是带着一个#的,所以想要使用,我的办法是使用, mode: ‘history’,模式,以下是简单列举

const router = new Router({
  // base: '/',
  mode: 'history',
  routes: [
 

而使用history模式后,部署到服务器,第一次进入页面是没问题,后面只要刷新就会404,我们公司使用的是Ubuntu+apache2(没有运维我前端只会这个),在vue-router官网中有相关配置文件创建.htaccess文件丢在项目中,代码如下

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

当时我从网上复制了一份配置文件如下

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ./index.html [L]
</IfModule>

在配置了apache2.conf文件下的AllowOverride none改成All后,运行sudo a2enmod rewrite 打开重写功能后,结果就是怎么都不成功,在悲痛与绝望的心情下,胡乱的尝试后,发现从官网上复制的配置文件放上去就没问题了,发现只是RewriteRule ./index.html [L]和RewriteRule . /index.html [L] 一个空格只差,遂解决

你可能感兴趣的:(VUE项目H5页面在微信中遇到的坑)