有些时候为了数据安全、调用摄像头拍照、录音、音视频通信，我们需要时用https协议向用户提供web服务，这篇博文记录一下vue2 开发环境及生产环境 nginx开启https的过程。

========  相关文章  ========

手搓一个人脸登陆、注册、手机扫码登陆

人脸登陆——Vue2 调用浏览器摄像头拍照及图片上传组件

Ubuntu 安装MySQL8 解决配置lower_case_table_names=1后启动失败

【已解决】Could not build wheels for dlib, which is required to install pyproject.toml-based projects

1、 vue2 开发环境

在项目的vue.config.js中配置devServer，设置https属性值为true。

module.exports = defineConfig({
  
  runtimeCompiler: true,
  publicPath: process.env.VUE_APP_PUBLISH_PATH,
  outputDir: 'dist'+process.env.VUE_APP_PUBLISH_PATH,
  transpileDependencies: true,
  
  devServer: {
    host: '0.0.0.0',
    port: 9192,
    open: false,
    https: true,   // 开启https
  }
}

2、nginx开启https

在/etc/nginx/nginx.conf中注释掉80端口的监听，开启443的 ssl 监听即可。

server {
        #listen 80 default_server;
        #listen [::]:80 default_server;

        # SSL configuration
        #
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;

        include snippets/snakeoil.conf;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;


        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ $uri/index.html ;
        }
}