英特网校

Apache下配置Vue的History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

首先在router文件夹中的index.js文件添加对应数据

const router = new VueRouter({
  mode: 'history',//新增
  base: '/mobile/',
  //如果把index.html和static文件夹放到网站根目录下的mobile(自己创建)时,需要添加
  routes: [...]})

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

Apache下需要先开通重写规则

1、加载Rewrite模块:

在conf目录下httpd.conf中找到

LoadModule rewrite_module modules/mod_rewrite.so

这句,去掉前边的注释符号“#”,如果没有这句就添加这句(一般都是有的)。

允许在任何目录中使用“.htaccess”文件,将“AllowOverride”改成“All”(默认为“None”):用查找的方法找

# AllowOverride controls what directives may be placed in .htaccess files.
# It can be “All”, “None”, or any combination of the keywords:
# Options FileInfo AuthConfig Limit
#
AllowOverride All

2、创建.htaccess文件

在Windows系统下不能直接建立“.htaccess”文件,可以用命令行的方式创建。找到根目录下的mobile,然后按住shifl,点击鼠标右键,在弹出框中点击“在此打开命令窗口”,在命令行下使用“echo a> .htaccess”建立,然后使用记事本编辑。

3、添加重写规则,用记事本打开.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>

上方代码为官网提供的,有些时候犹豫权限问题,不能失效,会出现403错误,错误代码如下

Forbidden
You don't have permission to access /mobile/
on this server.

需要在重写规则中添加权限  Options +FollowSymlinks【添加位置可以放在RewriteEngine On上方】最终的代码

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

如果文件放在mobile下时,最后重写规则路径需要修改成

  RewriteRule .  /mobile/index.html [L]【其中的mobile需要与路由配置中的base目录一致】

项目最终的结果

网站根目录(如果有mobile子文件夹,下面三项需要放在mobile下,没有子文件夹直接放在网站根目录)

                    ——index.html

                    ——static文件夹

                    ——.htaccess文件夹

评论中心

登录后可评论,请 登录 注册