526互联

vue启用https服务及nginx启用https配置

发布时间 2023-08-09 17:41:37作者: zhupan
1.vue开发环境中主要是configjs配置 启用https服务 
devServer: {
    https: true, //启用https
}

 2.nginx  申请一个ssl证书 ，自行申请。  下面是一个nginx例子  需要修改的配置https主要是红色标出来部分。蓝色加粗部分主要是history模式下 刷新出现404的解决办法

server {

    listen       11091 ssl;
    server_name  ssl;
    ssl_certificate       C:/test/nginx-1.21.3/ssl/test.crt;
    ssl_certificate_key  C:/test/nginx-1.21.3/ssl/test.key;
    gzip_static on;
     ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;
    
    location /api/ {
        proxy_pass http://127.0.0.1:11004/;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        proxy_set_header Host $http_host;
        proxy_cookie_path /api /;
    }    
        

    
    location / {    
        root ../static/dist/;
        try_files $uri $uri/ /index.html; //避免刷新404  一般路由为history时候
        index  index.html index.htm;
    }


    location @router {
        rewrite ^.*$ /index.html last;
    }

    error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}