HTTPS 迁移后 Vue 前端 WebSocket 连接故障：终极解决指南

vue.js

2024-03-03 16:05:30

HTTPS 迁移后 Vue 前端停止工作：解决 WebSocket 连接问题

引言

将 Vue 前端迁移到 HTTPS 后，可能会遇到 WebSocket 连接问题。这可能会导致页面停止工作，并显示控制台错误。本文将探讨导致此问题的可能原因，并提供详细的分步解决方案。

问题根源

HTTPS 证书问题： SSL 证书未正确安装或有效。
WebSocket 配置错误： WebSocket 服务器未在 wss 协议上运行，或 Vue.js 中的连接 URL 未更新为 wss。
Vue.js 配置问题： 热重载和实时重载功能已启用，或 devServer.allowedHosts 选项未正确配置。

解决方案

1. 验证 HTTPS 证书

确保已正确安装有效的 SSL 证书。
检查证书是否已颁发给正确的域名。

2. 配置 WebSocket

确认 WebSocket 服务器正在使用 wss 协议。
在 Vue.js 应用中，将 WebSocket URL 更新为 wss。

3. 检查 Vue.js 配置

禁用 vue-cli-service 中的热重载和实时重载。
将 devServer.allowedHosts 选项设置为 all。
在 chainWebpack 钩子中，将 resolve.symlinks 设置为 false。

代码示例

vue.config.js：

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

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: "all",
    hot: false,
    liveReload: false,
  },
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  },
})