Vue 2+Vue-cli 5.0.6配置HTTPS遇错求助：WebSocket及IP访问问题

为啥会出这些错？ #

1. 加了public: 'https://localhost:8080/'启动就报错 #

public是给生产环境用的公共路径配置，开发环境根本不需要手动设置。硬加会打乱dev-server的资源路径解析逻辑，直接触发启动失败。

2. 删了public后WebSocket连不上 #

Vue-cli的热重载靠WebSocket实现，开了HTTPS后WebSocket得用wss协议，但dev-server没自动适配这个协议，所以连接失败。

3. 用本地IP访问报证书错 #

你手里的证书是专门给localhost签发的，用本地IP访问时，证书域名和访问地址不匹配，浏览器直接判定证书无效，弹出安全警告。

靠谱解决办法 #

第一步：修正vue.config.js配置 #

删掉错误的public项，补上WebSocket的HTTPS适配配置：

const fs = require('fs');
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        allowedHosts: 'auto',
        https: {
            key: fs.readFileSync('./certs/example.com+5-key.pem'),
            cert: fs.readFileSync('./certs/example.com+5.pem'),
        },
        // 解决WebSocket连接失败问题
        client: {
            webSocketURL: 'wss://0.0.0.0:8080/ws'
        },
        // 适配本地IP访问的证书配置
        server: {
            type: 'https',
            options: {
                key: fs.readFileSync('./certs/example.com+5-key.pem'),
                cert: fs.readFileSync('./certs/example.com+5.pem'),
            }
        }
    }
});

第二步：生成兼容多地址的证书 #

如果需要用本地IP访问，别用仅适配localhost的证书，生成一个包含localhost和本地IP的自签名证书，推荐用mkcert工具：

• 安装mkcert：Mac直接执行brew install mkcert，Windows/Linux去官网下载对应系统的二进制包
• 生成证书：mkcert localhost 192.168.xxx.xxx ::1（把192.168.xxx.xxx换成你的实际本地IP）
• 将生成的localhost+2-key.pem和localhost+2.pem替换到项目的certs目录下

第三步：让浏览器信任自签名证书 #

浏览器默认不信任自签名证书，需要手动添加信任：

• Chrome：设置→隐私和安全→安全→管理证书→导入证书，选择“受信任的根证书颁发机构”
• Firefox：选项→隐私与安全→证书→查看证书→导入，勾选“信任由此证书标识的网站”

验证效果 #

重启dev-server（执行npm run serve），用https://localhost:8080或https://你的本地IP:8080访问，检查：

• 控制台不再出现WebSocket连接错误
• 浏览器地址栏显示安全锁（信任证书后）

内容的提问来源于stack exchange，提问作者Zoha Malik