vue在history模式中，刷新界面出现404错误方法合集（apache，nginx，iis）

在vue cli3或者cli2中，网页链接中会出现“#”，有点影响url的美观度，去掉“#”的方法如下。

export default new Router({
    mode:"history", //将模式修改成history就可以了
    routes: [{
        path: '/',
        name: 'Index',
        component: Index
    }]
})

但修改为history模式后，线上项目刷新会出现404错误，如下图

解决方法如下：

apache服务器下：

在项目目录下新建文件.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>

Nginx服务器：

server {
    listen 80xx;
    server_name _;
    index  index.html;
    root /xxx/www/project/;
    location / {
        try_files $uri $uri/ /index.html;
    }

IIS服务器：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <defaultDocument>
      <files>
        <clear />
        <add value="index.html" />
        <add value="Default.htm" />
        <add value="Default.asp" />
        <add value="index.htm" />
        <add value="iisstart.htm" />
        <add value="default.aspx" />
      </files>
    </defaultDocument>
    <rewrite>
      <rewriteMaps>
        <rewriteMap name="singlepage" />
      </rewriteMaps>
      <rules>
        <rule name="single-page-route" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" logRewrittenUrl="false" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>