从 NPM 链接解析别名

Question

我有一个 Vue 应用程序在某些地方使用link-module-alias，如下所示：

import MyPage from '@/components/MyPage'

main.js

该应用程序，我将整个应用程序导出为变量。

export const VueApp = () => {
var app = new Vue({
render: h => h(App)
}).$mount('#app')
return app
}

此应用程序将生成并发布到 NPM。我可以在另一个 Vue 应用程序中要求它，只需将VueApp()放在主页上即可重现该网站。

在该项目的根文件夹中，我运行了：

npm link

。因为我们希望为最终将使用 NPM 包的项目开发设置一个开发环境。

在新项目中，我使用以下命令使用本地 NPM 包：

npm link myapp

之后，我可以看到node_modules/myapp文件夹中的所有源代码。

运行应用程序，我收到错误：

These dependencies were not found
@/components/MyPage in /Users/<username>/source/myapp/src/index.js

我相信我需要为@角色在webpack.config.js中添加一个resolve。我没有webpack.config.js，但我有vue.config.js。

我只是不确定如何将resolve添加到vue.config.js.

Answer 1

来自 Vue CLI 文档：

node_modules中的符号链接

如果npm link或yarn link安装了依赖项，ESLint(有时还有Babel(可能无法>这些符号链接的依赖项正常工作。这是因为 webpack 默认将符号链接解析到它们的真实位置，从而中断 ESLint/Babel 配置查找。

此问题的解决方法是在 webpack 中手动禁用符号链接解析：

// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
}
}

警告：如果您的依赖项是由使用符号链接(如cnpm或pnpm(的第三方 npm 客户端安装的，则禁用resolve.symlinks可能会中断热模块重新加载。

如果<project-root>/vue.config.js尚不存在，则需要创建它。