之前用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
性能:抉择各国手机区号/国籍代码、展现各国国旗
抉择各国手机区号/国籍代码
展现各国国旗