首先文章的目的是为了用 https:xxx.com 域名访问一个本地服务（vue项目）

以下操作都是基于windows系统，假如咱们的vue项目本地启动后使用的 8010 端口

如果不要求https的话其实很简单，两个步骤即可

一、添加hosts配置

找到hosts文件，我的路径是：C:\Windows\System32\drivers\etc，添加下面这行代码保存

127.0.0.1 xxx.com

二、添加nginx配置

找到nginx配置文件，我的路径是：D:\Program Files\nginx\conf\nginx.conf，在http下添加一个server（其中8010是本地服务使用的端口号），添加完配置重启nginx即可通过 xxx.com 访问本地服务了

server {
    listen       80;
    server_name  xxx.com;
    location / {
        proxy_pass http://127.0.0.1:8010;
    }
}

但是某些情况下需要使用https访问本地服务，就需要配置ssl证书了

一、安装 OpenSSL

下载地址：slproweb.com/products/Wi…

我是下载了exe安装的

二、生成私钥和证书

1、打开终端工具，进入OpenSSL的安装目录，我的目录：D:\Program Files\OpenSSL\bin，执行以下命令可以生成一个私钥文件

生成一个文件名为private.key的2048位私钥文件，文件名可以自定义

.\openssl genrsa -out private.key 2048

2、生成证书签名请求（CSR）

运行以下命令生成证书签名请求文件（CSR），在运行此命令时，你需要提供一些相关信息，如国家/地区、组织、常用名称等。这些信息将被包含在生成的CSR文件中

.\penssl req -new -key private.key -out csr.csr

3、生成自签名的SSL证书

自签名的SSL证书通常不适用于正式的公共网站，因为它们没有通过由受信任的第三方证书颁发机构（CA）进行签名和验证。

这将生成一个名为"certificate.crt"的自签名SSL证书文件，有效期为365天。private.key就是前面生成的私钥文件

.\openssl x509 -req -days 365 -in csr.csr -signkey private.key -out certificate.crt

现在就可以在在bin目录下看到这两个文件private.key、certificate.crt

三、nginx使用证书

首先找到nginx的安装目录，我的是：D:\Program Files\nginx，在文件夹下创建ssl文件夹，把证书和私钥文件copy到ssl中

然后打开conf/nginx.conf文件修改配置

1、确保以下指令存在且未被注释

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

2、修改 server 块中参数 启用 SSL：

server {
    listen       443 ssl;
    server_name  xxx.com;
    
    ssl_certificate     ../ssl/certificate.crt;
    ssl_certificate_key ../ssl/private.key;
    location / {
        proxy_pass http://127.0.0.1:8010;
    }
}

修改完nginx配置，重启nginx，现在就可以使用 xxx.com 访问本地服务了

第一次访问时会出现一个警告【您的连接不是私密连接】，不要慌，点高级、继续前往即可