vue2 https wss

在Vue.js中使用HTTPS和WSS的步骤如下：

1. 配置HTTPS：
- 生成SSL证书：你可以使用自签名证书或购买证书。生成证书后，你将获得一个公钥和私钥文件。
- 在Vue项目的配置文件中，找到`devServer`选项，并添加以下配置：

     devServer: {
       https: {
         key: fs.readFileSync('path/to/private.key'),
         cert: fs.readFileSync('path/to/certificate.crt'),
       },
     },

将`path/to/private.key`和`path/to/certificate.crt`替换为你的私钥和证书文件的路径。

2. 配置WSS：
- 在Vue项目中，找到用于建立WebSocket连接的代码。
- 将`ws://`替换为`wss://`，以使用加密的WebSocket连接。

下面是一个示例，演示了如何在Vue项目中使用HTTPS和WSS：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<!-- App.vue -->
<template>
  <div id="app">
    <h1>Hello Vue!</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // 使用WSS建立WebSocket连接
    const socket = new WebSocket('wss://example.com/socket')
    
    socket.onopen = () => {
      console.log('WebSocket连接已建立')
    }
    
    socket.onmessage = (event) => {
      console.log('收到消息：', event.data)
    }
    
    socket.onclose = () => {
      console.log('WebSocket连接已关闭')
    }
  }
}
</script>

请注意，以上示例仅演示了如何在Vue项目中配置HTTPS和WSS。实际上，你需要根据你的项目结构和需求进行相应的配置和修改。