Nginx：同一域名下配置Vuepress+Vue(Hash)

因为百度搜索的缘故，将原先的一个Vue前端改为Vuepress+Vue(Hash)。

静态内容部分，使用Vuepress改造，借用了vuepress的melodydl主题，费了一些周折，但想清楚逻辑了，也就快了。

一、配置完后的访问路径

1.www.xxx.com

2.www.xxx.com/wk/#（工作平台）

二、不需要对工作平台的配置进行任何修改

1. router index.js

const router = new Router({

  routes: constantRoutes,

  mode: 'hash'

  // base: '/wk/'  (在hash模式下是无效的，不需要做这个配置，在history模式下要加这个，但是刷新存在问题，没想深入研究)

})

2.config/index.js webpack.prod.config.js(我用的webpack版本4)

publicPath: "./" (就这样不要改)

//publicPath: "./wk/" (这是错误的）

三、nginx配置

1. http模式

worker_processes  2;

error_log  logs/error.log;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  1000;

    gzip  on;
	gzip_static on; # 开启静态文件压缩
	gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
	gzip_buffers     4 16k;
	gzip_http_version 1.1;
	gzip_comp_level 2;
	gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
	gzip_vary on;
	gzip_proxied   expired no-cache no-store private auth;
	gzip_disable   "MSIE [1-6].";
	

    server {
        listen       80;
        server_name  localhost www.xxx.com;
		root  d:/dist/home/dist;
		try_files $uri $uri/ =404;

		
		location /wk {
            alias   d:/dist/wk/dist;
			try_files $uri $uri/ /wk/index.html;
            index  index.html index.htm;
        }


        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

		location /api/ {
			proxy_pass http://127.0.0.1:xxxx/;
			proxy_set_header	X-Real-IP $remote_addr;
			proxy_set_header	X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header	Host $http_host;
			proxy_http_version  1.1;
			proxy_set_header	Connection "";
			#proxy_set_header	X-NginX-Proxy true;
			#proxy_redirect		off;
		}
    }
}

注意上面：

1.第一个应用的配置不能用 location /{

},

而是用

        server_name  localhost;
		root  d:/dist/qcw-home/dist;
		try_files $uri $uri/ =404;

2.第二个应用的配置用location /wk，下面使用alias  d:/dist/wk/dist;，而不是root  d:/dist/wk/dist;。

2.https模式

worker_processes  2;

error_log  logs/error.log;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  1000;

    gzip  on;
	gzip_static on; # 开启静态文件压缩
	gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
	gzip_buffers     4 16k;
	gzip_http_version 1.1;
	gzip_comp_level 2;
	gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
	gzip_vary on;
	gzip_proxied   expired no-cache no-store private auth;
	gzip_disable   "MSIE [1-6].";
	

    server {
        listen       80;
        server_name  localhost;
		return 301 https://$server_name$request_uri;
    }
	
	# HTTPS server
    #
    server {
        listen       443 ssl;
        server_name  localhost www.xxx.cn;
		root   d:/dist/home/dist;
        index  index.html index.htm;

        ssl_certificate     d:/nginx-1.18.0/conf/xxx/www.xxx.com_bundle.crt;
        ssl_certificate_key  d:/nginx-1.18.0/conf/xxx/www.xxx.com.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
		
		location /wk {
            alias  d:/dist/wk/dist;
            index  index.html index.htm;
			try_files $uri $uri/ /wk/index.html;
        }
		
		location /api/ {
			proxy_pass http://127.0.0.1:xxxx/;
			proxy_set_header	X-Real-IP $remote_addr;
			proxy_set_header	X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header	Host $http_host;
			proxy_http_version  1.1;
			proxy_set_header	Connection "";
			#proxy_set_header	X-NginX-Proxy true;
			#proxy_redirect		off;
		}
    }
}