Vue CLI 搭建本地https调试

背景

我本地通过vue cli 创建并构建完成一个webrtc音视频项目，想要将该项目搭建在本地服务器，这样在同个网络（局域网）下的用户能否正常访问并使用我的项目，但由于webrtc的限制，必须要https才能正常使用，所以为解决这个问题，我使用到了vue cli 提供的 devServer 来挂载https服务。

实现方式

在项目根目录下，新建 vue.config.js 文件，然后新增一下代码，保存，从新运行项目即可，npm run serve

vueconst internalIp = require('internal-ip');  // 引入该模块主要是用于获取当前IP地址，将项目地址设置为当前IP地址，这样同个IP端下的用户可以直接访问我的项目

module.exports = {
    devServer: {
        contentBase: "./dist", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, // 不跳转
        inline: true, // 实时刷新
        https: true, // 开启https
        port: 9999, // 端口号
        host: internalIp.v4.sync(),  // 项目地址
    }
};

image.png

image.png