How to use the history mode of front-end routing for single-page applications deployed on cdn

however, background configuration support is required for this mode to play well. Because our application is a single-page client application, if the background is not configured correctly, when the user accesses http://oursite.com/user/id directly in the browser, it will return 404, which is not good-looking.

it is well known that history mode that turns on front-end routing (such as vue-router) requires server support. What if I want to deploy the page to CDN (such as Qiniuyun, Aliyun OSS, etc.)? It seems that these CDN can only set up a 404 page at most. I don"t know how to jump back to the index page.

I have only one idea at present, that is to change one page to multiple pages and use prerender-spa-plugin to generate html pages. I wonder if this is feasible?


prerender-spa-plugin is probably not desirable, because id in http://oursite.com/user/id is dynamic, so if you use 10, 000 user, you need to generate 10, 000 pages to upload to CDN. Completely dynamic things can hardly be replaced by static things.

you can add a layer of ngixn jump to http://oursite.com/ to point to the CDN domain name, let ngixn solve dynamic problems, and CDN to provide static resources.


hash history


I wonder if ngixn can be set on these CDN. If so, configuration can solve the problem.
it should work. This single page needs a webserver, to configure rewrites and so on, no matter where it is deployed.


Aliyun's oss comes with this feature. After the cdn is linked to oss, you can OK it by setting it up directly on oss.

image.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b39abd-3457c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b39abd-3457c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?