logo头像

arthas.com.cn

npm link之后无法import导入的解决办法

该文章被围观

我们在开发npm包的时候,希望通过npm link之后在本地调试,确定没有问题之后再发布npm仓库。今天遇到了npm link一个正在开发中的包,然后在vue工程里面import之后为undefined的问题。

具体操作为

1、在该包下面执行 npm link,软连到全局;
2、在vue工程中npm link my-package-name,将软连加入到该工程的node_modules下;
3、在该工程中通过ES6语法import导入,console.log输出,结果为undefined;

问题原因

因为是vue-cli 3.0初始化的工程,打包用的是webpack,而webpack的默认配置中symlinks的默认值是true,也就是说,“将解析为其_真实_路径,而不是其符号链接(symlink)位置”,导致模块解析失败。

解决办法

vue.config.js中,将该参数设置为false:

1
2
3
4
5
6
7
module.exports = {
configureWebpack: {
resolve: {
symlinks: false
}
}
}

参考资料

https://www.jianshu.com/p/ca252cd667df