支持Vue router使用 HTML5History 模式（Nginx/Apache）

前言

前端Vue router 使用history模式，URL会比hash模式好看，这种模式要玩好，还需要后端配置支持，否则会报404错误。

注：前端代码省略。

 

后端配置例子

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的 publicPath 选项 (opens new window)和相关的 router base property (opens new window)。你还需要把下列示例中的根目录调整成为子目录

官方文档： 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

• Apache

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

RewriteEngine On   ：表示打开Rewrite功能，关闭off

RewriteBase  ：设置目录级重写的基准URL。可以理解成把该目录（这个.htaccess所在目录）假定为基准的URL前缀。本例中这样的写法无用。

RewriteRule  ：定义重写规则，把匹配的地址按此规则重写。[L]表示这是最后一段规则。^(.*)$意思是匹配当前URL任意字符，.表示任意单个字符，*表示匹配0次或N次（N>0）

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 这两句语句的意思是请求的文件或路径是不存在的，如果文件或路径存在将返回已经存在的文件或路径

RewriteRule  ：意思是当上面的RewriteCond条件都满足的时候，将会执行此重写规则，把这些请求都重定向到了/index.html。

 

示例：

例如用 RewriteBase /media/testUser/ 替换掉 RewriteBase / 

 <VirtualHost *:80>
         DocumentRoot /WORK/HTML/testV2/MobileRoot/
         ServerName apptest.qshtest.com
         ServerAlias apptest.qshtest.com
         ErrorLog /usr/local/apache/logs/error_log.saas
         CustomLog /usr/local/apache/logs/access_log.saas combined
         ErrorDocument 404 /?_a=e404
         RewriteEngine on
         RewriteRule \.svn\/  /?_a=e40p4

        <Directory "/WORK/HTML/testV2/MobileRoot/media/testUser">
             DirectoryIndex index.html index.php
             Options All
             AllowOverride All
             Require all granted

             ########### 添加以下内容  ###########
             RewriteEngine On
             RewriteBase /media/testUser/
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . ./index.html [L]
             ########### 添加以上内容  ###########
        </Directory>

 </VirtualHost>

 

除了 mod_rewrite，你也可以使用 FallbackResource (opens new window)。

 

• nginx

location / {
  try_files $uri $uri/ /index.html;
}

示例：

server {
    listen              82;
    access_log off;

    root   /WORK/HTML/testV2/MobileRoot;
    index  index.html index.htm;

    location / {
        alias  /WORK/HTML/testV2/MobileRoot/;
        index  index.html index.htm;
        try_files  $uri $uri/ /media/testUser/index.html;       #  添加此行
    }
}