记录一下vite打包vue3组件库，使用组件库时报 (reading 'isCE') 错误问题

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
功能：选择各国手机区号/国籍代码、展示各国国旗

• 选择各国手机区号/国籍代码
  
• 展示各国国旗