繁体   English   中英

Vite+Vue - 通过 npm 链接引用的 Package 无法解析 vite.resolve.alias

Vite+Vue - Package referenced via npm link can't resolve vite.resolve.alias

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在开发 package 来帮助我们公司的其他开发人员。

我知道我可以创建别名以使代码更简洁并提高其可读性。

所以:

PACKAGE 项目

vite.config.js

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    
  resolve:{
        preserveSymlinks: false,
        alias:{
            '@' : path.resolve(__dirname, 'src'),

  },
// ....
})

假设我有以下文件夹结构

  • 源代码
    • 帮手
      • commonHelper.js
    • index.js

src/index.js

import {merge} from '@/helpers/commonHelper.js'
export {merge}

参考PACKAGE项目的项目

vite.config.js

它还有一个 vite.config.js 和一个 @ 别名指向它 self src

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    
  resolve:{
        preserveSymlinks: false,
        alias:{
            '@' : path.resolve(__dirname, 'src'),

  },
// ....
})

任何文件.js

Lets assume that my package project is called foo and it's referenced using npm link for testing now, after finishing the package it will be referenced using npm install

import {merge} from 'foo'

merge({},{});

当我尝试运行我的项目时,出现以下错误

  [vite] Internal server error: Failed to resolve import "@/helpers/commonHelper.js" from 
  "..\..\npmPackages\foo\src\index.js". Does the file exist?       
  Plugin: vite:import-analysis
  File: E:/_Development/foo/src/index.js
  3  |  import {merge} from '@/helpers/commonHelper.js'
     |                       ^
  4  |  export {merge}
      at formatError (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40853:46)
      at TransformContext.error (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40849:19)
      at normalizeUrl (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37586:33)
      at async TransformContext.transform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37719:47)
      at async Object.transform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:41102:30)
      at async loadAndTransform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37364:29)

到目前为止,我注意到问题正在发生,因为@指向引用foo package 的项目

我能做些什么?

2 个回复

我假设您正在使用 Vite 来构建库。

在这种情况下,使用“npm 链接”或发布过程,您应该使用字段“模块源代码”而不是生成的实际 ESM 库文件指向 package 的 package 的 package.json。

然后,您可以在其他项目中使用 package,就像它是从某个 package 注册表安装的一样。

请不要使用 '/src',而是使用 '@/'

3 从本地 vite+vue 库导入的组件未更新

我正在研究一个工作中的新项目的选项。 我们正在考虑使用 nuxt(或者只是普通的 vue 3)并创建一个库,我们将在其中保留我们的共享组件。 我正在尝试进行初始设置,但遇到了问题。 我按照本教程创建了库并向其中添加了打字稿。 我创建了一个带有计数器的示例组件并将其导出。 问题是,当我从我的库中将 ...

6 从NPM链接解析别名

我有一个Vue应用程序,该应用程序在某些地方使用link-module-alias : 在该应用程序的main.js中,我将整个应用程序导出为变量。 该应用程序已构建并发布到NPM。 我可以在另一个Vue应用程序中要求它,只需将VueApp()放在主页上即可复制该网站。 ...

8 已发布 vue 3 npm package 有问题 styles

我在 npm 中发布了非常简单的 toast 组件 package,这里有vite 、 vue 3和typescript 。 你可以在这里看到回购。 有两个问题。 第一个问题是,当您安装此 package 时,styles 不适用我可以在 node-modules/my-package/dist/ ...

9 Vite 无法解析样式导入

我目前正在按照以下链接中的步骤从 webpack 迁移到 vite https://github.com/originjs/webpack-to-vite 。 转换几乎完成,现在当我尝试在本地运行它时,我遇到以下错误 我不确定这是否可以从 vite.config.js 解决。 如果是这样, ...

10 由于 vite,npm 链接未链接

我正在尝试将两个应用程序链接在一起。 我有两个项目。 两个项目都使用 Vue(2)。 一个是主要项目,另一个是组件库。 我成功地将这两个项目与 npm link 链接在一起。 但是我的主要项目给出了一个错误。 错误无法解析包“@hitfoyb/my-component-library”的条目。 该 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM