vue2开发环境和生产环境开启https

原创于 2026-06-21 12:25:21 发布 · 129 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#https #网络协议 #http #nginx #vue2开发环境

收录于

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

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 ;
        }
}