@TOC

Apache configuration

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

Nginx configuration

location / {
  try_files $uri $uri/ /index.html;
}
Copy the code

Nginx configuration in vue history mode

The start of a server-side nginx configuration is as follows (assuming the domain name: xx.xxx.com) : [* * * * * ~] # cat/Data/app/nginx/conf/vhosts/xx.xxx.com.conf

 server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

         access_log /var/log/testwx.log main;

}
Copy the code

Modified as follows:

server {
         listen 80;

         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;
         access_log /var/log/testwx.log main;
         
		## Pay attention to start here
         location / {
             try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; }}Copy the code

The original Node. Js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) = > {
  fs.readFile('index.htm'.'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})
Copy the code

Node.js-based Express

For Node.js/Express, consider using the connect-history-API-Fallback middleware

Internet Information Services (IIS)

1. Install IIS UrlRewrite
2. Create a web.config file in the root directory of your website with the following contents:

<?xml version="1.0" encoding="UTF-8"? >
<configuration>
 <system.webServer>
   <rewrite>
     <rules>
       <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
         <match url="(. *)" />
         <conditions logicalGrouping="MatchAll">
           <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
         </conditions>
         <action type="Rewrite" url="/" />
       </rule>
     </rules>
   </rewrite>
 </system.webServer>
</configuration>
Copy the code

Caddy

rewrite {
    regexp .*
    to {path} /
}
Copy the code

Firebase host

Add the following to your firebase.json:

{
  "hosting": {
    "public": "dist"."rewrites": [{"source": "* *"."destination": "/index.html"}}}]Copy the code

The last

Be warned, because by doing so, your server will no longer return a 404 error page because the index.html file will be returned for all paths. To avoid this, you should overwrite all routing cases in the Vue application and then render a 404 page.

const router = new VueRouter({
  mode: 'history'.routes: [{path: The '*'.component: NotFoundComponent }
  ]
})
Copy the code