配置 HTML5 History 模式

配置 HTML5 History 背景，通过直接使用 Vue-Router 的hash模式，但 hash 模式，在 app与H5混合开发过程中，不允许使用 hash 模式，必须使用 history 模式。history 模式的配置方法如下。

（一）后端配置，后端配置这里只介绍Nginx方式进行配置，配置方式。

Nginx配置，基本以二级目录方式进行配置。配置二级目录方式基本有2种

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

server {
    listen 80;
    server_name all;
    location ^~/gomelend {
        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/;
    }
}

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

server {
    listen 8001;
    location / {
        root D:/gbcodeSpace/gomelend-mall/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

3.就像这样Http下

server {
    listen 80;
    server_name all;
    location ^~/gomelend {
        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 {
    listen 8001;
    location / {
        root D:/gbcodeSpace/gomelend-mall/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

第二种方式,这种方式。可以在主配置还是其他配置都可以。是用rewrite重写指向当前静态资源

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

（二）前端Router配置 VueRouter 配置 对base 进行配置：ENTRY_NODE_ENV.ROUTER_BASE === /gomelend

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

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

module.exports = {
	// 基本路径process.env.ROUTER_BASE
	publicPath: './',
}

配置完成可以尝试了。

(三)为什么 VueRouter 要设置 base 呢？

当你访问 https://xxx/dir 首先会被Nginx进行处理， Nginx中有 /dir 直接返回相应静态资源。之后在进行其他跳转操作如：https://xxx/login, 当你在这个页面刷新。相当于https://xxx/login Nginx配置没有这个资源。会出现 404的问题。所以一定样在 base 上配置当前二级目录名。