该使用 vue 打包后的哪种 dist 文件？

从 CDN 引入或者不使用打包工具

vue(.runtime).global(.prod).js：
- 直接在浏览器里通过 <script src="..."> 使用 vue，这个脚本会暴露 Vue 全局对象
- 注意 global 构建不是 UMD 构建，这个文件被构建为 IIFE 格式以便能够通过 <script src="..."> 形式引入并直接使用
- 在浏览器里的模板编译：
  - vue.global.js 是完整构建，它包含 compiler（编译器）和 runtime（运行时），这样它就可以动态编译模板了
  - vue.runtime.global.js contains only the runtime and requires templates to be pre-compiled during a build step
  - vue.runtime.global.js 仅仅包含 vue 运行时，不包含编译器。使用这个 dist 文件需要模板已经被预编译好了（一般都是在项目构建打包的时候预编译好了）
- 它内联了所有的 Vue 核心内部包，也就是说，它是一个单独的文件，不依赖于其他文件
- 生产环境下请使用 *.prod.js
vue(.runtime).esm-browser(.prod).js：
- 如果使用原生模块导入（在浏览器中使用 <script type="module"> 来开启原生模块），那么使用这个 dist 文件

使用打包工具

vue(.runtime).esm-bundler.js：
- 在打包工具中使用 vue 使用这个 dist 文件，比如在 webpack, rollup 和 parcel 里
- 代码中含有 process.env 代码（上面介绍的 dist 文件不含有），这样打包工具就可以替换它们了
- 这个 dist 文件不会压缩代码，它的压缩有打包工具完成
- 会导入依赖 (比如 @vue/runtime-core, @vue/runtime-compiler)，含有像 import * as runtimeDom from '@vue/runtime-dom'; 这样的代码
  - 被导入的依赖也是 esm-bundler 构建格式，它们也可能含有自身的依赖
  - 这意味着您可以单独安装/导入这些依赖，但您必须确保它们能在一起正常工作
- 浏览器里的模板编译：
  - vue.runtime.esm-bundler.js 仅仅包含运行时，需要所有模板被预编译好。因为使用打包工具的话 html 模板通常都被预编译好了，所以打包工具默认引入的都是这个文件（vue 包的 package.json 的 module 字段指向了这个文件）
  - vue.esm-bundler.js：包含编译器。如果你正在使用打包工具但是依然想要模板编译器（比如解析 in-DOM 模板或者 JavaScript 内联模板），那就使用这个 dist 文件

打包构建功能配置

vue 的 esm-bundler 构建暴露了全局可以配置的功能，它们能够在编译时被重写覆盖配置：

__VUE_OPTIONS_API__
- Default: true
- Enable / disable Options API support
__VUE_PROD_DEVTOOLS__
- Default: false
- Enable / disable devtools support in production
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__
- Default: false
- Enable / disable detailed warnings for hydration mismatches in production

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle.

For Server-Side Rendering

vue.cjs(.prod).js:
- For use in Node.js server-side rendering via require().
- If you bundle your app with webpack with target: 'node' and properly externalize vue, this is the build that will be loaded.
- The dev/prod files are pre-built, but the appropriate file is automatically required based on process.env.NODE_ENV.

其它帮助理解的知识

format 格式

参考

rollup 打包输出的 format 配置支持以下选项：

amd – 异步模块加载，适用于 RequireJS 等模块加载器
cjs – CommonJS，适用于 Node 环境和其他打包工具（别名：commonjs）
es – 将 bundle 保留为 ES 模块文件，适用于其他打包工具，以及支持 <script type=module> 标签的浏览器。（别名：esm，module）
iife – 自执行函数，适用于 <script> 标签（如果你想为你的应用程序创建 bundle，那么你可能会使用它）。iife 表示“自执行函数表达式”
umd – 通用模块定义规范，同时支持 amd，cjs 和 iife
system – SystemJS 模块加载器的原生格式（别名：systemjs）

动态编译模板

:::tip“动态编译模板”是什么意思？意思是可以直接解析 html 模板。我们知道 vue 组件有个 template 选项，它只有在我们引入了模板编译器后才能使用。我们可以将 html 字符片段赋值给它。

举例：

export default {
  // ...
  template: `
    <div>
      <button @click="toLogin">登录</button>
    </div>
  `,
  methods: {
    toLogin() {
      // ...
    }
  }
  // ...
}

:::

in-DOM templates

in-DOM templates 和 templates via inline JavaScript strings 含义

在前端开发中，in-DOM templates 和 templates via inline JavaScript strings 是两种常见的方式来定义和表示 HTML 模板。

In-DOM Templates：

也被称为外部模板或内联 HTML 模板
"In-DOM" 指的是这些模板是 DOM（Document Object Model，文档对象模型）的一部分，即它们是 HTML 文档的一部分
示例：

html

<!-- example.html -->
<template id="my-template">  
  <div>  
    <h1>{{ title }}</h1>  
    <p>{{ content }}</p>  
  </div>  
</template>

Templates via Inline JavaScript Strings：

这种方法是在 JavaScript 文件中使用字符串来定义模板
示例：

// example.js
const template = `  
  <div>  
    <h1>${title}</h1>  
    <p>${content}</p>  
  </div>  
`;

该使用 vue 打包后的哪种 dist 文件？ ​

从 CDN 引入或者不使用打包工具 ​

使用打包工具 ​

打包构建功能配置 ​

For Server-Side Rendering ​

其它帮助理解的知识 ​

format 格式 ​

动态编译模板 ​

in-DOM templates ​