在开始之前，有必要说明一下，Vue CLI 本身是有很完善的中文文档的，绝大多数的配置项都可以在官方文档中找到，这篇文章里只是一些个人的简单理解。

transpileDependencies

是否要使用 babel 转义 node_modules 中的依赖们。建议设置为 true，否则如果你依赖的 node_modules 中使用了 ES6 的语法，可能会导致你的应用无法正确运行在过时的浏览器中。
过时的浏览器的占有率其实比我们想象中的大一些，例如微信小程序在 iOS 系统下的 webview，它就是不支持 ES6 语法的。 有些小伙伴发现自己的应用直接在微信访问时完全正常，但是嵌入 iOS 微信小程序的 webview 后，就无法正常工作，究其原因，就在于此了。 另外还有一个在官方文档中提到过的内容，如果你的依赖非常的多，简单的将其设置为 true 将会影响你的应用打包速度，如果你比较在意这一部分内容，那么可以传入一个需要转义的模块名的数组作为它的值，这样它就只会转义这个数组内的模块了。

outputDir

很常用的一个选项，决定了打包输出的文件夹位置，绝大多数情况，我们可能都会想要直接把打包结果输出到我们 web 服务器的目录下，而我们的 vue 源码自然不会放到 web 服务器的目录中，那么设置它就是一个很好的解决方案。 当然，你也可以不修改这个值，让它保持默认，然后在通过 jenkins 之类的 CI 工具，在打包完成后，复制打包完成的文件到你的 web 服务器指定目录。

publicPath

比较常用的应用场景，就是当你的网站需要部署在非根目录下的时候使用，这一部分文档的说明已经相当完整详细了，我这里就不画蛇添足了。

pages

从官方文档来看，它其实是用于多页面应用的(不再赘述)，不过我这里的单页应用还是用到了，我只是拿它来修改入口文件和模板的路径:

module.exports = defineConfig({
  pages: {
    index: {
      entry: './h5/main.js', // 修改入口文件地址
      template: './h5/index.html', // 修改 html 模板地址
      filename: 'index.html', // 其实是默认值，可以不加，放在这里只是方便理解
    },
  },
});

想要实现同样的效果，还有另一种修改方式，那就是使用 chainWebpack，写法如下:

module.exports = defineConfig({
  indexPath: 'index.html', // 其实是默认值，可以不加，放在这里只是方便理解
  chainWebpack: config => {
    config.plugin('html').tap(configs => {
      configs[0].template = './h5/index.html'; // 修改 html 模板地址
      return configs;
    });
    config.entry('app').clear().add('./h5/main.js'); // 修改入口文件地址
  },
});

这两种写法，本质上都是在影响 html-webpack-plugin 的配置，具体要使用哪个，就见仁见智了。

devServer

这里是要配置一下你的本地服务器，一般来说，前后端分离的应用，都可能存在跨域的问题，而我们一般会将允许的域名作为白名单列入后台的跨域访问控制中，所以我们的 devServer 如果想要正常请求到测试环境的服务器，本地的仍然是 localhost 就不是很合理了。

module.exports = defineConfig({
  devServer: {
    allowedHosts: [ // 修改一下允许的本地域名，如果使用不在这个列表的域名访问 devServer，会被拒绝。
      'local.ma-zhe.com'
    ],
    https: true, // 是否开启 https，建议开启，很多 cookie 都是 secure 的了，不支持在 http 下访问（至于证书，其实没关系，毕竟这是你本地访问，无视浏览器的警告点个继续就是了）
    open: true, // 是否在 devServer 启动之后自动打开，建议开启，不然你还要自己拼 URL 打开。
    host: 'local.ma-zhe.com', // host
    port: '8801', // devServer 所在的端口
  },
});