vue相关爬坑总结

目录：

• 一、Webpack
• 二、Webpack 5 移除 Node.js 核心模块 Polyfill
• 三、Vue 3 中 $listeners 被移除
• 四、Vue 中使用 JSON.stringify 判断对象变化的局限性
• 五、Vue 3 + Vite 打包后路径引用错误
• 六、Vue 3 中 toRaw 方法影响响应性
• 七、Vue 3 响应式数据在 v-for 中无法更新

一、Webpack

1. 设置反向代理（proxy）

   • 在 vue.config.js 中配置 devServer.proxy 是开发阶段解决跨域问题的有效方法。
   • 示例代码中 /priceParList 是请求路径前缀，会自动匹配到目标服务器地址 http://localhost:3000。

2. 设置反向代理失败

   • 如果代理未生效，请检查：
     • 请求地址是否与代理配置中的前缀匹配。
     • 是否遗漏了端口号（如：/api 不会匹配到 http://localhost/api，除非明确指定）。
     • 网络请求是否使用 HTTPS，可能需要额外配置 secure: false。

3. Vue Router 传参

   • params 和 query 只能传递基本类型数据（字符串、数字等），如果需要传递对象，可以先使用 JSON.stringify() 序列化，再在接收方用 JSON.parse() 还原。
   • 注意：通过 URL 传递的数据应尽量避免敏感信息。

4. Vue CLI 怎么兼容 ES6+

   • Vue CLI 默认使用 Babel 编译 ES6+ 语法以支持旧浏览器。
   • 配置项说明：
     • targets.browsers: 指定目标浏览器范围。
     • useBuiltIns: 控制 polyfill 引入方式，推荐使用 'usage' 以减少冗余代码。
     • corejs: 推荐使用版本 3，因为它更全面且模块化更好。

5. 转译 node_modules 中的代码

   • 如果第三方库依赖了 ES6+ 特性，可以通过 transpileDependencies 配置来强制编译这些包。
   • 使用正则表达式或数组形式指定依赖名，例如：['some-es6-library'] 或 /node_modules\/some-es6-library/

6. 打包导出项分析

   • Webpack 打包后的代码中可能会包含 __webpack_require__.d()，这是用于定义 exports 的函数。
   • 如果你发现某些变量没有正确导出，可以检查源码中是否正确使用了 expo