朝阳周边网站建设,有什么网站可以做外贸,wordpress 安装第二步,宁德市路桥建设有限公司网站深入浅出关于Npm linl的问题
关键词#xff1a; vue3报错 Uncaught TypeError: Cannot read properties of null (reading ‘isCE‘) at renderSlot
npm link 无法实现热更新
我的开发环境是
“vue”: “^3.2.13”
今天在使用 rollup搭建组件库的时候我发现我的组件库不能…深入浅出关于Npm linl的问题
关键词 vue3报错 Uncaught TypeError: Cannot read properties of null (reading ‘isCE‘) at renderSlot
npm link 无法实现热更新
我的开发环境是
“vue”: “^3.2.13”
今天在使用 rollup搭建组件库的时候我发现我的组件库不能实现热更新 我本地的项目是通过npm link去链接到 我本地打包的ui libs 为啥不能热更新呢 大家可以看看我上一篇文章 我当时是在组件库的vue组件中使用了插槽 当我一旦使用了插槽 如果不对webpack进行配置 他会给我报错 报什么错位大家可以看一下这个文章记录的很详细
我的问题跟他不能说很像只能说一毛一样
https://cloud.tencent.com/developer/ask/sof/106913760/answer/132194925这里 我再废话一下 我怕文章链接失效
大致的问题就是我使用了插槽 打包后 引入我的组件库就会报错 当我把slot注释掉 页面又可以运行了 大致锁定了问题我就开始找解决方法
最终我的解决方案是
在vue.config.js中添加如下配置
const { defineConfig } require(vue/cli-service)
const path require(path);
module.exports defineConfig({transpileDependencies: true,configureWebpack: {// 这个配置resolve: {symlinks: false,//留意一下这里alias: {vue: path.resolve(./node_modules/vue),},},},/* 这段代码是在webpack配置文件中的resolve字段中用于解析模块的路径配置。具体解释如下symlinks: false表示不解析符号链接即webpack不会对项目中的符号链接进行处理。alias用于创建别名将某个模块的路径映射到另一个路径上这里是将vue模块的路径映射到node_modules/vue目录下。这样在项目中引用vue模块时直接使用import Vue from vue即可而不需要指定完整的路径。*/
})
问题的原因是什么?
造成这个的原因是有两个不同的vue版本 就可能下载的其他的第三方和当前的vue版本不相同 就有两个vue的副本在引入的时候 npm去尝试引入的地址不对
解决方案 1.由于npm的引入地址不对 那我们使用yarn删除node_modules使用yarn安装生成新的yarn.lock 然后执行安装 2.修改配置文件 vite搭建的项目在 vite.confg.js 文件中添加如下配置:resolve: {dedupe: [vue]
},webpackvue-cli搭建的项目在vue.config.js文件中添加如下配置:
const { defineConfig } require(vue/cli-service)
const path require(path);
module.exports defineConfig({transpileDependencies: true,configureWebpack: {resolve: {symlinks: true,alias: {vue: path.resolve(./node_modules/vue),},},},
})到这里 问题确实解决了 slot也能使用了 但是的的rollup热更新没法用了 最开始我是以为是npm link的问题 经过查看源码确定不是npm link的问题 什么问题呢 symlinks: false,
但是的的rollup热更新没法用了
最开始我是以为是npm link的问题 经过查看源码确定不是npm link的问题
什么问题呢 symlinks: false,
symlinks: false表示不解析符号链接 意思就是你link进来的包 我不管我不解析 这怎么行所以我们把他改成 true 表示我们需要解析这个文件 完美解决 热更新和不能使用插槽问题
