时间戳

首页 > 解决方案 > 从 NPM 链接解析别名

vue.js - 从 NPM 链接解析别名

问题描述

我有一个link-module-alias在这样的地方使用的 Vue 应用程序：

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

我相信我需要为角色添加resolvea 。我没有，但我有。webpack.config.js@webpack.config.jsvue.config.js

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

标签： vue.jshyperlinkalias

解决方案

来自Vue CLI 文档：

符号链接node_modules

如果npm linkor安装了依赖yarn link项，ESLint（有时也包括 Babel）可能无法正常工作 > 对于那些符号链接的依赖项。这是因为webpack 默认将符号链接解析到它们的真实位置，从而破坏了 ESLint / Babel 配置查找。

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

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

警告： 如果resolve.symlinks您的依赖项是由使用符号链接（例如cnpm或pnpm.

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

推荐阅读