The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode

​​​​ Abstract ：vue-router  Default hash Pattern —— Use URL Of hash To simulate a complete one URL, So when URL When the change , The page will not be reloaded .

This article is shared from Huawei cloud community  《 Study VueRouter,HTML5 History Pattern , because history The mode refresh page appears 404》, author ： DevFeng .

vue-router Default hash Pattern —— Use URL Of hash To simulate a complete one URL, So when URL When the change , The page will not be reloaded .

If you don't want something ugly hash, We can use routing  history  Pattern , This model takes full advantage history.pushState API To complete URL Jump without reloading the page .

const router = new VueRouter({
mode: 'history',
routes: [...]
})

1.
2.
3.
4.

When you use history Mode time ,URL Just like normal url, for example http://yoursite.com/user/id, Good looking, too ！

But play it well , Background configuration support is also required . Because our application is a single page client application , If the background is not configured correctly , When the user is directly accessed in the browser http://oursite.com/user/id It will return 404, It's not good .

So , You want to add a candidate resource to the server that covers all cases ： If URL No static resources were matched , The same should be returned index.html page , This page is you app Dependent pages .

# Backend configuration example

Be careful ： The following example assumes that you are serving the application in the root directory . If you want to deploy to a subdirectory , You need to use  VueCLI Of  

publicPath Options  (opens new window) And the related  router base property (opens new window). You also need to adjust the root directory in the following example to a subdirectory ( For example RewriteBase /name-of-your-subfolder/ Replace RewriteBase/).

#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>

1.
2.
3.
4.
5.
6.
7.
8.

except mod_rewrite, You can also use FallbackResource (opens new window).

#nginx

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

1.
2.
3.

# Native Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.html', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.html" 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)
})

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

# be based on Node.js Of Express

about Node.js/Express, Please consider using   connect-history-api-fallback middleware  (opens new window).

#Internet InformationServices (IIS)

1.    install  IIS UrlRewrite(opens new window)

2.    Create a... In the root of your site web.config file , The contents are as follows ：

<?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>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

#Caddy

rewrite {
regexp .*
to {path} /
}

1.
2.
3.
4.

#Firebase host

In your firebase.json Add ：

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

# Warning

Give me a warning , Because after that , Your server will not return 404 Error page , Because it returns for all paths  

index.html file . To avoid that , You should be Vue The application covers all routing conditions , Then give another example 404 page .

const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})

1.
2.
3.
4.
5.
6.

perhaps , If you use Node.js The server , You can use the server route to match the incoming URL, Does not return... When there is no match to the route 404, To achieve a fallback .

  Click to follow , The first time to learn about Huawei's new cloud technology ~