目錄：

• 一、Webpack
• 二、Webpack 5 移除 Node.js 核心模塊 Polyfill
• 三、Vue 3 中 $listeners 被移除
• 四、Vue 中使用 JSON.stringify 判斷對(duì)象變化的局限性
• 五、Vue 3 + Vite 打包后路徑引用錯(cuò)誤
• 六、Vue 3 中 toRaw 方法影響響應(yīng)性
• 七、Vue 3 響應(yīng)式數(shù)據(jù)在 v-for 中無法更新

一、Webpack

1. 設(shè)置反向代理（proxy）

   • 在 vue.config.js 中配置 devServer.proxy 是開發(fā)階段解決跨域問題的有效方法。
   • 示例代碼中 /priceParList 是請(qǐng)求路徑前綴，會(huì)自動(dòng)匹配到目標(biāo)服務(wù)器地址 http://localhost:3000。

2. 設(shè)置反向代理失敗

   • 如果代理未生效，請(qǐng)檢查：
     • 請(qǐng)求地址是否與代理配置中的前綴匹配。
     • 是否遺漏了端口號(hào)（如：/api 不會(huì)匹配到 http://localhost/api，除非明確指定）。
     • 網(wǎng)絡(luò)請(qǐng)求是否使用 HTTPS，可能需要額外配置 secure: false。

3. Vue Router 傳參

   • params 和 query 只能傳遞基本類型數(shù)據(jù)（字符串、數(shù)字等），如果需要傳遞對(duì)象，可以先使用 JSON.stringify() 序列化，再在接收方用 JSON.parse() 還原。
   • 注意：通過 URL 傳遞的數(shù)據(jù)應(yīng)盡量避免敏感信息。

4. Vue CLI 怎么兼容 ES6+

   • Vue CLI 默認(rèn)使用 Babel 編譯 ES6+ 語法以支持舊瀏覽器。
   • 配置項(xiàng)說明：
     • targets.browsers: 指定目標(biāo)瀏覽器范圍。
     • useBuiltIns: 控制 polyfill 引入方式，推薦使用 'usage' 以減少冗余代碼。
     • corejs: 推薦使用版本 3，因?yàn)樗媲夷K化更好。

5. 轉(zhuǎn)譯 node_modules 中的代碼

   • 如果第三方庫依賴了 ES6+ 特性，可以通過 transpileDependencies 配置來強(qiáng)制編譯這些包。
   • 使用正則表達(dá)式或數(shù)組形式指定依賴名，例如：['some-es6-library'] 或 /node_modules\/some-es6-library/

6. 打包導(dǎo)出項(xiàng)分析

   • Webpack 打包后的代碼中可能會(huì)包含 __webpack_require__.d()，這是用于定義 exports 的函數(shù)。
   • 如果你發(fā)現(xiàn)某些變量沒有正確導(dǎo)出，可以檢查源碼中是否正確使用了 expo