問題
最近遇到一個問題,就是項目上有時候部署的時候會用到
nginx
轉發,然后nginx
轉發與不轉發時取的一個ws
的地址一個是取當前的ip
端口,一個是取配置中的ip
端口。這種情況本地調試的時候,由於本地是localhost
,導致了ws無法成功建立連接,需要做一些特殊處理,在開發環境,將代理的項目的ip
端口注入到全局變量中,方便給ws
請求時提供正確的路徑。
解決方法
使用
webpack.DefinePlugin()
來解決這個問題。
const proxy = require('../package.json').porxy; // 我是將proxy的代理寫在了package.json中,先獲取配置的proxy
...
plugins: [
new webpack.DefinePlugin({
"PROXY": JSON.stringify(proxy) // 將proxy當做全局變量PROXY注入到項目的上下文環境中,注意這個時候,這個全局變量並不是附加到了window對象上,而是直接的一個全局變量。訪問的時候就是直接PROXY就可以訪問到該變量
})
]
...
- 之所以要用JSON.stringfy()包裹起來,是因為如果是單純的字符串,這個插件就會把該字符串代做代碼來解析,它的配置規則如下:
如果這個值是一個字符串,它會被當作一個代碼片段來使用
如果這個值不是字符串,它會被轉化為字符串(包括函數)。
如果這個值是一個對象,它所有的 key 會被同樣的方式定義。
如果在一個 key 前面加了 typeof,它會被定義為 typeof 調用。
小結
- 這個全局注入大多數時候是用來解決開發環境和線上環境產生不同的行為時會用到,也比較好用。