构建配置 on ZiYang FrontEnd Interview

Vue2对IE的兼容性支持范围

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

核心能力维度：

框架兼容性理解（Vue版本特性与浏览器支持范围）
工程化配置能力（Webpack+Babel的Polyfill配置）
浏览器特性适配（ES6+特性降级策略）

技术评估点：

Vue2官方兼容性声明范围
ES6特性在旧版IE中的缺失情况
@babel/preset-env的targets配置策略
Webpack构建链中Polyfill注入方式
第三方库兼容性处理方案

技术解析

关键知识点：

Vue2兼容范围：IE9+（依赖Object.defineProperty）
必填Polyfill：Promise、Object.assign、Array.prototype方法
Babel配置：@babel/preset-env + core-js@3
Webpack构建链路：入口polyfill注入 + transpileDependencies

原理剖析： Vue2的响应式系统基于Object.defineProperty实现，该API在IE9+部分支持，需避免使用__proto__等特性。异步组件加载依赖Promise，而IE全系不支持Promise，必须通过core-js或es6-promise填充。Webpack通过babel-loader将ES6+语法转换为ES5，配合@babel/preset-env的useBuiltIns: 'usage'实现按需polyfill注入。

常见误区：

误认为Vue3支持IE11（实际仅Vue2支持旧IE）
未配置transpileDependencies导致第三方库ES6语法未转换
混淆polyfill与runtime的区别（polyfill污染全局，runtime局部替换）

问题解答

Vue2官方支持IE9及以上版本。实现兼容需：

必需Polyfill：
- core-js/stable（含Promise）
- regenerator-runtime/runtime（处理async/await）
- 手动补充Object.assign等未自动注入的API

Webpack核心配置：

 // vue.config.js
module.exports = {
 transpileDependencies: [/node_modules/], // 编译所有依赖
 configureWebpack: {
 entry: ['core-js/stable', './src/main.js'],
 }
}

// babel.config.js
module.exports = {
 presets: [
 ['@babel/preset-env', {
 targets: { ie: '9' },
 useBuiltIns: 'usage',
 corejs: { version: 3, proposals: true }
 }]
 ]
}

解决方案

编码示例：

Vue3的IE11兼容性方案

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

核心能力维度：Vue工程化配置能力、浏览器兼容性处理经验、构建工具链理解深度
技术评估点：

对ES6+特性向后兼容方案的掌握（Proxy/enerator-runtime）
Babel配置与polyfill机制的实际运用能力
对node_modules依赖转换策略的理解（transpileDeps工作原理）
IE11特有兼容问题的处理经验（CSS变量/对象API）
构建体积与兼容方案的权衡意识

技术解析

关键知识点

core-js > @babel/preset-env > browserslist配置优先级
@vue/cli构建链 > transpileDeps实现机制 > useBuiltIns配置策略

原理剖析

Vue3默认使用Proxy实现响应式，但IE11不支持且无法polyfill。兼容方案需：

替换为@vue/composition-api + reactivity模块的非Proxy实现
通过core-js提供缺失的ES6+ API（Map/Set/Promise等）
babel.config.js配置presets使用useBuiltIns: 'usage'自动按需注入polyfill
transpileDeps通过白名单机制将node_modules中的ES6+依赖强制经过Babel转译

 // babel.config.js
module.exports = {
 presets: [
 ['@vue/cli-plugin-babel/preset', {
 useBuiltIns: 'usage', // 按需注入polyfill
 corejs: 3 // 指定core-js版本
 }]
 ]
}

常见误区

误认为proxy-polyfill可完整实现Proxy（仅支持部分功能）
未配置transpileDeps导致第三方库ES6语法未转换
core-js全局污染与按需加载的配置混淆
忽略CSS自定义属性的postcss-custom-properties兼容处理

问题解答

Polyfill配置步骤：

安装core-js@3、regenerator-runtime

入口文件顶部引入：

 import 'core-js/stable' 
import 'regenerator-runtime/runtime'

使用@babel/plugin-transform-runtime减少重复注入

build与server配置项详解

Wed, 05 Mar 2025 10:37:25 +0000

考察点分析

该题考察候选人以下能力维度：

构建工具深度使用：是否掌握Vite核心配置项及其工程化应用
构建优化意识：能否根据场景选择合适的构建配置优化产物体积
开发环境调优：是否具备本地开发环境定制能力
安全认知：是否理解现代Web开发中的HTTPS配置要求

技术评估点：

build.minify的压缩策略选择
rollupOptions自定义打包配置
server.proxy跨域解决方案
HTTPS证书配置方式
预构建依赖配置逻辑

技术解析

关键知识点

生产构建（build）
- 代码压缩：minify（terser/esbuild）
- 资源处理：assetsInlineLimit（base64内联阈值）
- 输出控制：outDir/sourcemap/manifest
- 高级配置：rollupOptions（覆盖Rollup配置）
开发服务器（server）
- 网络配置：port/host/open
- 安全协议：https（自签名证书/自定义证书）
- 代理系统：proxy（解决跨域/路径重写）
- 热更新：hmr（心跳检测/协议配置）

 示例配置结构：
// vite.config.js
export default defineConfig({
 build: {
 minify: 'terser', // 压缩引擎选择
 rollupOptions: {
 output: { manualChunks: (id) => {...} } // 自定义代码分割
 }
 },
 server: {
 port: 3000, // 端口锁定
 https: { // HTTPS配置
 key: fs.readFileSync('key.pem'),
 cert: fs.readFileSync('cert.pem')
 }
 }
})

常见误区

混淆开发/生产环境配置（如将server配置用于build）
手动配置Rollup导致Vite默认优化失效
误用HTTP/2协议导致代理失效
未配置CORS策略直接访问第三方API

问题解答

Vite的配置系统通过build和server两大模块分别处理构建和开发环境：

构建配置 on ZiYang FrontEnd Interview

Vue2对IE的兼容性支持范围

考察点分析 link

技术解析 link

问题解答 link

解决方案 link

Vue3的IE11兼容性方案

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

build与server配置项详解

考察点分析 link

技术解析 link

关键知识点 link

常见误区 link

问题解答 link

考察点分析

技术解析

问题解答

解决方案

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

考察点分析

技术解析

关键知识点

常见误区

问题解答