vue history mode Configuration Guide package deployed in the secondary directory domain names

　　Recently doing the project, the project needs to be deployed in two directories under the domain name, and is in use vue-router in history mode.

　　We all know vue-router two kinds of basic front-end access mode of hash and History . hash back mode with # when packaged just need the absolute path (/) into a relative path ( ./ ), can be deployed anywhere, with no server, but does not look good, so we generally choose history mode, but history mode need to meet the deployment server.

 

This article is in vue-cli3 version , the deployment configuration to do four in the secondary directory domain:

1. Configure vue-router routing of documents, according to their deployed fill two directories　

1  export default new VueRouter({
2     mode:"history",
3     base:"/web",

 

2. In vue.config.js (if not under a new project root directory) configuration files

 Note: baseUrl from Vue CLI 3.3 from deprecated, please use publicPath . 

module.exports = {
　　publicPath:"/web"
}

 

3. In the inlet file index.html the head was added to the tag　

 <meta base ="/web/">

 

4 . The final step is to deploy configurations to nginx for example　　　

server {
    listen 80;
    server_name localhost;
    root /home/wwwroot/;
    location /web {
        try_files $uri $uri/ /web/index.html;
    }
}

This, configuration, and deployment has been completed, will be packaged in two front-end static resources under the domain name specified root directory (multi-level directory configuration as above) can be recorded,

Note that the above configuration is configured for not need so much in history mode, for more than two directories deployed in the domain configuration, hash pattern and history model deployed in the domain root directory

I tested deployed, just follow the four places above configuration, there is no problem, but there are imperfect, also please point out, thank you ....