Vue-route+webpack Deploying a single-page routing project with 404 issues with Access refresh

http://blog.csdn.net/hayre/article/details/70145513

Problem Description:

Recently in the development of the CMS using the Vue.js framework, the use of Vue-route combined with Webpack to write a single-page routing project, its own server-side configuration Nginx. After the deployment is complete, access is no problem, click to jump from the page is no problem, but just click Refresh or through the browser address bar to enter, there will be 404 phenomenon! In the local development is not the problem, debugging when everything is normal

On the server
such as direct access to address:

http://10.***.**.116:8081/home/application/list

will appear 404

Cause of the problem:

The resource accessed when the page was refreshed is not found on the server because the path set by Vue-router is not the actual path.

As above the 404 phenomenon, because in the Nginx configuration root directory/html/dist below there is no/home/application/list this real resource exists, these access resources are rendered in JS.

Here because I'm using Vue-router's history mode.

Vue-router default hash mode--use the hash of the URL to simulate a complete URL, so when the URL changes, the page does not reload.

Because I do not want ugly hash, is the use of the route history mode, this mode takes full advantage of the history.pushstate API to complete the URL jump instead of reloading the page.

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

When using the history mode, the URL is like a normal URL, such as http://yoursite.com/user/id, also good-looking!

However, this mode is good to play and requires background configuration support. Because our application is a single page client application, if the background does not have the correct configuration, when the user directly accesses http://oursite.com/user/id in the browser will return 404, that is, the above mentioned problems.

So, you need to add a candidate resource that covers all cases on the server: if the URL doesn't match any static resources, you should return to the same index.html page, which is the page your app relies on.

Problem solving:

Back-end configuration examples

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>

Nginx

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

node. JS (Express)

https://github.com/bripkens/connect-history-api-fallback

Attention:

Give a warning, because after doing so, your server will no longer return the 404 error page because the index.html file will be returned for all paths. To avoid this, you should cover all routing conditions in the Vue app and then give a 404 page.

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

Alternatively, if you are using node. js as the background, you can use the server-side routing to match the URL and return 404 when there is no match to the route, thus implementing fallback.

Vue-route+webpack Deploying a single-page routing project with 404 issues with Access refresh