Vue CLI 项目配置详解：transpileDependencies 和 chainWebpack 字段

问题：Vue CLI 项目配置文件中的 'transpileDependencies' 和 'chainWebpack' 字段有什么用？

解决方案：

该配置文件位于项目根目录下的 'vue.config.js' 文件中。

1. transpileDependencies: 用于配置需要通过 Babel 转译的依赖包。在该字段中添加的依赖包会被 Babel 转译，以确保它们在目标浏览器中正常运行。

2. chainWebpack: 用于修改 Webpack 的配置。可以使用链式调用方式来修改 Webpack 的各个配置项。例如，上面的例子中我们使用 'chainWebpack' 修改了入口文件，添加了 'babel-polyfill'。

安装 @vue/cli-plugin-babel 插件：

npm install --save-dev @vue/cli-plugin-babel

配置 vue.config.js 文件：

module.exports = {
  // ts6 => ts5
  transpileDependencies: ['flv.js', 'webpack-dev-server/client'],
  chainWebpack: (config) => {
    config.entry.app = ['babel-polyfill', './src/main.js'];
  }
}

注意事项：

• 该配置文件中的字段名和使用方式由 Vue CLI 定义，必须按照规定格式进行配置，否则可能导致配置不生效。