深入浅出关于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' ] },webpack（vue-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 表示我们需要解析这个文件 完美解决 热更新和不能使用插槽问题！
