之前用 vue3 写了一个【国际化的手机区号、国籍代码抉择组件】，之前苦于打包配置出错始终未能公布至 npm 中，最近把打包配置搞好了，也公布至 npm 上了，过了几天有人应用上了我的组件，但却报错了，这让我十分头疼，在我本地跑没问题，在他的环境上却会报错，而后就开始各种查找材料，最终还是找到问题所在了

1、报错

报错内容为：Cannot read properties of null (reading 'isCE')，如图：

呈现这个问题的起因为：应用了两个不同版本的 Vue

2、解决问题：第一步

解决这个问题的第一步：不能将 Vue 自身打包进组件库代码中

以下是至关重要的配置（这里应用 vite 打包）：
vite.build.config.js

export default {
  input: 'xxxx.js',
  output: {
    globals: {vue: 'Vue' // 咱们的仓库理论依赖 vue, vue 是不须要打包的，所以这里阐明咱们用了一个全局变量 vue},
    name: 'xxxx',
    file: `lib/xxx.ems.min.js`,
    format: 'esm',
  },
  /****** 这一步至关重要，如果不配置 external: ['vue']，则组件库中会蕴含 vue 代码 ******/
  // 不将 vue 代码打包进咱们的组件库代码中，如果将 vue 代码打包进组件库中则会报错
  external: ['vue']
}

2、解决问题：第二步

解决问题的第二步：将 Vue 从package.json中的 dependencies 中移除掉

Vue3的依赖能够增加到 devDependencies 中，然而不能增加到dependencies
package.json

{"dependencies": {},
  "devDependencies": {
     ...
    "vite": "2.2.3",
    "vue": "^3.2.29"
  },
}

如果 dependencies 中有 Vue 依赖，那么在我的项目中应用时就有可能会报 Cannot read properties of null (reading ‘isCE’) 谬误，因为我的项目中依赖的 Vue 版本与你组件库中依赖的可能不一样。

至此，Cannot read properties of null (reading 'isCE') 谬误就解决了！

3、分享下我的组件

代码仓库：vue3-country-intl
装置：npm install vue3-country-intl -S
性能：抉择各国手机区号 / 国籍代码、展现各国国旗

• 抉择各国手机区号 / 国籍代码
  
• 展现各国国旗