Based on the multi-page structure of vue scaffolding, how can vue-router 's history mode be supported?
problem description
realize the multi-page structure by modifying the webpack configuration based on vue-cli 2.x.x (how to configure many blogs on the Internet. I"ll post it again if necessary), but at present, each single page of this structure can only use vue-router default hash mode, not history mode.
question supplement 1
if it is not possible to change the configuration such as webpack / vue-loader (development & product), can also propose to configure proxy forwarding or other ways of (product) through nginx.
the problem encountered by the nginx proxy mode is that if you use history mode, the access to url is normal but cannot be refreshed (try_files has been added).
question supplement 2
multipage mode + at development time (history mode will not be able to access routing)
http://localhost:8011/main.html-sharp/admin/customer/detail?test=101039
multipage mode + production time (can be achieved through nginx, history mode refresh will be 404)
http://localhost:8011/-sharp/admin/customer/detail?test=101039
or
http://localhost:8011/mian/-sharp/admin/customer/detail?test=101039
single page mode + development time / production time + history (expected url structure)
http://localhost:8011/admin/customer/detail?test=101039
question supplement 3
nginx effective configuration
server {
listen 9009;
server_name localhost;
-sharp
charset utf-8;
location / {
root D://TortoiseSVN/repository/iop/iop-view/dist;
index main.html;
try_files $uri $uri/ /main.html;
}
location ^~ /login/ {
proxy_pass http://127.0.0.1:9009/login.html;
}
}
it is easy to use history mode. There are documents on the official website, which need to be used together with front and back ends:
first, the front end is configured with mode
const router = new VueRouter({
mode: 'history',
routes: [...]
})
second, because the url of the address bar must first be parsed through the backend, and if the backend does not recognize the url, it will return an error of 404, so the backend needs to configure a compatibility error to point to a specific page, such as the setting of the home page.
nginx mode
location / {
try_files $uri $uri/ /index.html;
}
node/express
connect-history-api-fallback middleware is recommended
upstairs answer should be no problem, if the normal use can not be refreshed, it is probably the wrong path, you can take a look at the error_log to make a judgment.
you can also consider using nuxt. There are more capabilities
have you solved the main problem? I have the same problem. It should be a path problem, but I don't know where the path should have a problem
my view on this issue is as follows: since it is multi-page, that is, routing is provided by the server, why do you still use vue-router to do spa, and it is not better to go directly to ssr (such as nuxt)?
if you refer to the way that the server servos multiple html files, and then each html file corresponds to a spa (that is, the so-called multi-page), this is actually equivalent to multiple spa. If you use nginx as a proxy, can't you write matching rules for different paths one by one? For example:
location ^~ /page1 {
try_files $uri $uri/ /index.html;
}
location ^~ /page2 {
try_files $uri $uri/ /index.html;
}
this is essentially spa, but it has changed from a single number to multiple. This is probably the pattern of an old angularjs + django project I worked on before.
personal humble opinion, if there is a mistake, also hope to spray lightly. If the subject finds the answer, you can also share it.
