Vue2 组件 props(属性) 校验不生效排查思路（经验贴）

一、什么是 Vue 属性校验

   Vue 组件属性可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。（抄了官网的话^_^），具体 Vue2 属性校验应该如何定义和使用，这里就不再赘述了，大家可以点击 Vue-属性校验 进入官网学习使用即可。

二、组件属性校验失效排查

1. 开发环境下的属性校验警告通常都是默认开启的，如果你能确认当前我们使用的 vue 是开发环境版本，那属性校验警告信息没有可能是你 全局配置 有问题，读者可以自行参考 Vue 全局配置相关选项，都有详细说明，这里不再赘述。

2. 如果配置全局配置属性校验开启依然不生效，则可以确认的是，你此时（通常是开发时）使用的 Vue 版本不包含 Vue 属性校验警告信息，换句话说就是你此时使用的 Vue 版本是生产版本，那我们应当如何确认我们当前使用的 Vue 是哪个版本的呢？读者可以参考 对不同构建版本的解释，尤其需要仔细阅读的是 开发环境 vs. 生产环境模式，这里指出：

对于 UMD 版本来说，开发环境/生产环境模式是硬编码好的：开发环境下用未压缩的代码，生产环境下使用压缩后的代码。

CommonJS 和 ES Module 版本是用于打包工具的，因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。

CommonJS 和 ES Module 版本同时保留原始的 process.env.NODE_ENV 检测，以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换这些环境变量以便控制 Vue 所运行的模式。把 process.env.NODE_ENV 替换为字符串字面量同时可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终的文件尺寸。

上面就说明了，当我们引入的是 CommonJS 或者 ES Module 版本的时候，如果 process.env.NODE_ENV 是 production, 则 Vue 中的开发中的提示信息将会被去掉，包括组件属性校验警告信息，所以我们需要看我们引入的 vue 是否是 CommonJS 或者 ES Module 版本的 Vue，通常我们开发时使用的 Vue 版本都是 vue/dist/vue.esm.js，编译工具在打包这个 Vue 文件的时候会检测  process.env.NODE_ENV，如果是 production，则会被将其中的 组件属性校验警告等信息 去掉，如果我们此时误将 process.env.NODE_ENV 设置为了 prodution，那么就会导致我们在开发过程中无属性校验警告信息...

3. 通过上面的排查步骤检查之后，如果我属性校验还不生效，则必定是我们引入的 Vue 是生产版本的，或者在打包工具在编译的时候已经将其中的开发警告相关代码去掉了，原因可能如下（以 webpack 为例）：

a. 在 webpack 中将 vue 设置为了 external，而外部引入的 vue 是生产版本。

b. 在开发环境中， webpack 将 vue 打包成了外部库（可以参考 WebpackDllPlugin）以提升打包速度，而打包外部库时使用了 CommonJS 或者 ES Module 版本 & 生产模式打包（既 process.env.NODE_ENV=production）或者 引入的 Vue 是生产版本，这就会使我们项目中引入的 Vue 版本是生产版本，导致组件属性校验失效。

我在公司实际项目中就遇到了这个问题，因为我们前端开发都是在基座上开发模块，基座是研发中心提供的，但是在开发过程中组件的属性校验一直都不生效，因为对开发影响不大并且也不影响生产使用等种种原因，所以一直没有处理，最近五一小长假期间笔者在公司加班，在好奇心驱使下通过上述1、2步骤排查没问题，始终找不到原因所在，纠结两个小时之后之后看到项目中使用了 webpackDllPlugin 加速打包，好奇打开配置一看，顿时感叹研发中心基座的作者的骚操作，开发环境中引入 ES Module 版本的 Vue，但是却使用了生产打包模式打包，服了....