教學 星空筆記-VUE-CLI跑https出現的問題

各位好。我又開始想要來整理文章啦。

這次是我開始接觸VUE3時。發生的一個小問題。
先來個情境說明。

認真來說，因為某個專案。有去購買了一個新的UX。
由於決定要來跑VUE3。所以就去買支援VUE3版的。

基本的安裝過程都還好，沒啥問題。

但星空我啊~~有自已用的一套開發環境。
講白了點，就是用了一個LINUX的伺服器。然後用SMB的方式連到我的電腦來。讓我能在我的WINODWS機上開發。
但網頁跑在LINUX SERVER機上。

由於在我的開發機上，我都固定會跑https。
所以上面的專案也是讓它跑在 https 上。

但開跑後，其實在BUILD的過程是沒事。然後使用DEV模式也OK。
但就死在 websocket的連接上。

因為我跑https的關係。理論上 websocket 也因該得同步連接到 wss 上。
在我之前VUE2的經驗。
直接在vue.config加入以下的東西就好了

devServer: {
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    hotOnly: false,
    disableHostCheck: true,   
  },

可是，居然給我報錯。說不支援 disableHostCheck 這個參數了。
試了好幾個方法。也問了 chatGT 雖然給了許多答案。但沒一個可以用的。
但至少有了解到一件事。VUE3的配置參數有變動了。

而且因為我的開發環境也比較特殊。並不是本機連結式的。
網路上都是接本機連結跟PROXY的連接方式。
可惜並不適合我。

總算，我找到了一篇研究 devServer 且也跟我一樣困擾的文章。
最後找到如下的萬用設定解法

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        host: '0.0.0.0',
        port: 0,
        client: {
            webSocketURL: "wss://"+setHost+"/ws"
        },
    }
})

這才讓我可以正常作業了