Vue Router 配置 History模式(二级目录方式)

Vue Router 配置 History模式

后端配置

后端配置这里只介绍Nginx方式进行配置，配置方式

第一种方式

先在主Server上配置,一个二级目录

server {
        listen 80;
        server_name all;
        location ^~/test {
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8001/;
        }
    }

在重现创建个Server，根目录指向需要的静态资源

server {
        listen 8001;
        location / {
            root D:/db/path/dist;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }

就像这样Http下

server {
        listen 80;
        server_name all;
        location ^~/test {
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8001/;
        }
}
erver {
        listen 8001;
        location / {
            root  D:/gb/path/dist;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
}

第二种方式配置

可以在主配置还是其他配置都可以。是用rewrite重写指向当前静态资源

location /test {
    root D:/gb/path/dist;
    index index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /test/index.html last;
        break;
    }
}

前端配置

变量

ENTRY_NODE_ENV.ROUTER_BASE = './test'

VueRouter 配置

const router = new VueRouter({
  mode: 'history',
  base: ENTRY_NODE_ENV.ROUTER_BASE,
  scrollBehavior: () => {
    return { x: 0, y: 0 }
  },
  routes
})

webapck 构建时需要 publicPath ‘./’ 方式 当前项目用的是 Vue-cli@3

module.exports = {
  publicPath: './',
}

配置完成可以尝试了

问题

1. 为什么VueRouter要设置base呢? 解：当你访问 https://xxx/test时， 首先会被Nginx进行处理， Nginx中有/test直接返回相应静态资源。之后在进行其他跳转操作如：https://xxx/login，当你在这个页面刷新。相当于 https://xxx/login Nginx配置没有这个资源。会出现 404的问题。所以一定样在router.base一定要配置二级目录名称