「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」
1. 全局特性标志（global feature flags）的配置
前面我们还有一个浏览器中的警告没有解决：
这个警告的大意是：“特性标志 __VUE_OPTIONS_API__ 和 __VUE_PROD_DEVTOOLS__ 没有被明确定义。你正在运行 vue 的 esm-bundler 构建版本的代码，它期望这些编译时特性标志通过构建工具的配置被全局注入，以便在生产构建中获得更好的摇树效果。更多详情，可以查看链接： link.vuejs.org/feature-fla… ”。
我们可以点击这个链接地址，查看详情：
可以看到，vue 从 3.0.0-rc.3 版本开始，esm-bundler 构建（我们当前项目中使用的就是这个构建版本的 vue 源码：import { createApp } from 'vue/dist/vue.esm-bundler';）现在暴露了可以在编译时重写的全局特性标志（global feature flags）：
__VUE_OPTIONS_API__：这个标志是用来对Vue2做适配的（我们前面写的template、data等选项其实都属于Options API，但在Vue3中，这种Options API写得相对来说就比较少了，我们现在一般在Vue3中编写Composition API（setup() {}），后面会讲），默认情况下，这个__VUE_OPTIONS_API__标志默认值是true，这就意味着默认情况下Vue3项目中会包含支持Options API的这部分代码。那么，如果我们在项目中编写的都是Composition API代码，其实就不再需要这部分解析Options API的代码了，所以这里强烈建议我们对这个标志进行正确的配置，以便在最终构建时获得正确的摇树（tree-shaking，可以实现无用代码的自动删除，即如果发现某部分代码并没有被使用到，那么最终会将这部分代码删除掉，这样一来整体代码的体积会就变得更小些）效果。__VUE_PROD_DEVTOOLS__：这个标志是用来设置在生产环境下要不要对devtools（这里指的是vue的调试工具Vue Devtools）做支持。通常，调试工具只在开发阶段使用，生产阶段一般是不需要的，所以我们可以将这个标志设置为false（也是其默认值，但如果想要在生产阶段也让Vue Devtools工具生效，则可以设置为true）。
所以，既然我们使用的是 vue.esm-bundler.js 这一版本的 vue，那么在 webpack 中，就需要使用 DefinePlugin 插件对这两个全局特性标志进行明确配置：
...
// 通过解构的方式拿到 webpack 内置的 DefinePlugin 插件，你也可以通过 require('webpack').DefinePlugin 直接获取到该插件
const { DefinePlugin } = require('webpack');
...
module.exports = {
...
plugins: [
...
new DefinePlugin({
BASE_URL: "'./'",
__VUE_OPTIONS_API__: true, // 这里必须是布尔值，不能写成字符串
__VUE_PROD_DEVTOOLS__: false // 这里必须是布尔值，不能写成字符串
}),
...
]
}
再来打包看下效果：
你会发现，这次就没有任何警告了。
此外，因为当前我们的项目中已经没有再使用 template 选项来编写模板内容了（我们现在是把模板内容写在了 .vue 文件中的 <template> 中，到时候在打包时会通过 vue-loader 和 @vue/compiler-sfc 来帮我们进行解析，所以不再需要 Runtime + Compiler，只需要 Runtime）所以我们的项目中使用 Runtime-only 版本的 vue 即可，也就是说，当我们编写的都是 SFC 文件（.vue 文件）时，不需要使用 vue/dist/vue.esm-bundler，只需使用 vue 即可，所以，我们对 src/main.js 中的内容进行修改：
// 第三方库的导入可以放最上面（个人习惯）
import { createApp } from 'vue'; // 直接使用 vue 即 vue.runtime.esm-bundler.js 版本
...
修改完后，我们重新打包，你会发现依然是没有问题的，没有再出现之前那个“组件提供了 template 选项，但在当前这个 Vue 构建版本中不支持运行时编译”的警告了。因为现在 .vue 文件中的 <template> 会交给 vue-loader 中的 @vue/compiler-sfc 来帮助我们进行解析的。
