问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue3将node_modules内能正常引入的插件包文件拷出来后引用为什么会报错？

头像
Elvis000
    6633992106

    在开发过程发现了一个问题，在vue3+vite+ts的项目中安装好avue插件后，在main.ts中将avue全局import，页面可正常使用无异常。 但是当我把node_modules中avue文件内容拷出来，放到项目其他的文件夹下，目录结构和文件都保持一致。然后在main.ts中import后，在预览页面时浏览器就会报出The requested module '/src/utils/avue/lib/avue.js' does not provide an export named 'default'的错误。

    请问这是为什么？如何解决该错误？

    main.ts 文件中引入avue:
    image.png

    node_modules中avue插件的文件结构：
    image.png

    将avue文件拷贝到其他文件夹下：
    image.png

    在main.ts引入拷贝后的avue：
    image.png

    浏览器报错信息：
    image.png

    vue3vue.jsjavascriptnpmhtml5
    阅读 2.9k
    avatarAI BotBETA

    问题分析

    当你在Vue3+Vite+TypeScript项目中遇到这个问题时，主要的原因是模块解析和打包方式的不同。在node_modules中的包通常是按照npm或yarn等包管理器的规则来组织和打包的，这些包可能包含了ES模块、CommonJS模块或其他格式的JavaScript代码，同时它们也可能被设计为支持多种打包工具（如Webpack、Vite等）。

    当你将avue包从node_modules中直接拷贝到项目源代码目录中时，你实际上改变了模块的路径和可能的解析方式。Vite（或任何其他现代前端构建工具）会根据其配置和模块系统的规范来解析和打包模块。如果avue包内部使用了特定的打包策略或模块导出方式（如使用默认导出export default，或者命名导出export { ... }），并且这些导出方式在拷贝后没有得到正确的处理或配置，就可能导致导入时出现错误。

    解决方案

    1. 不要手动拷贝：
      最直接的解决方案是不要手动从node_modules中拷贝包到你的项目中。这样做既容易出错，也难以维护。使用npm或yarn等包管理工具来管理依赖项是更可靠和高效的方式。
    2. 检查导出方式：
      如果确实需要修改或访问包内部的某些文件（尽管不推荐），请确保你理解并正确处理了模块的导出方式。检查avue包的源代码，确认其是如何导出模块的，然后在你的项目中以相应的方式导入它们。
    3. 修改Vite配置：
      如果avue包在node_modules中正常工作，但在你的自定义目录中出现问题，可能需要检查Vite的配置文件（如vite.config.ts），看看是否有与模块解析相关的设置需要调整。

    4. 使用别名（Alias）：
      如果由于某些原因你需要将avue放在自定义目录中，可以在Vite配置中添加别名来指向这个目录，这样你就可以像使用node_modules中的包一样来使用它了。

      // vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'avue': '/path/to/your/custom/avue/directory'
    }
  }
});
    5. 考虑使用子模块：
      如果avue包提供了子模块或允许按需加载，你可以考虑只引入你需要的部分，而不是整个包。这可以通过npm或yarn的依赖管理功能来实现，而无需手动复制文件。

    总之，最好的做法是遵循标准的依赖管理方式，使用npm或yarn来管理你的项目依赖。如果你需要修改或扩展某个库，考虑贡献回原项目或创建一个分支，而不是将库文件直接复制到你的项目中。

    2 个回答
    得票最新
    头像
    陟上晴明
      21.4k144991
      ✓ 已被采纳
      头像
      然后去远足
        42.9k103763

        这个包最后输出的模块用的 UMD，你只能使用 CommonJS 来导入，用 ESM 导入当然会报错了。

        https://www.npmjs.com/package/@smallwei/avue?activeTab=code

        要是原作者不提供 ESM 版本的输出的话，你就只能按 @陟上晴明 提到的方式引入了。

        多展开说一点，你要问为啥在 node_modules 底下的时候你能用 ESM 来导入一个 CommonJS 模块而不会报错，那是因为用 Vite/Rollup/ESBuild/Webpack 这类的构建工具存在，它会把 CommonJS “转换”成 ESM 的形式，最后实际导入的是这个 ESM 的模块。

        以 Vite 为例，主要分为两个步骤：

        1. 检测到你导入的是一个形如 import foo from 'foo' 这样的“裸模块”（也就是引用路径开头既不是绝对路径也不是相对路径的），会被视为要从 node_modules 里找。
        2. 依赖预构建，把所有 CommonJS 导出都转换为 ESM 的形式。
        https://vitejs.dev/guide/features.html#npm-dependency-resolvi...
        https://vitejs.dev/guide/dep-pre-bundling#the-why

        这就是为啥你能“混着用”的原因。但注意，这个环节只会针对裸模块（通常来说就是指包管理器里的第三方模块）的代码，不会针对你的项目代码，所以当你把它从 node_modules 拷贝到自己的源码目录下，就不管用了。因为一个正常的项目源代码里，是不可能也不应该同时出现 CommonJS 和 ESM 两种模块方案的。

        最后，我不知道为啥题主非得要把代码从 node_modules 拷贝出来。如果非要这么整的话，其实除了一开始 @陟上晴明 提到的方式，还有其他思路可以选择。

        比如在 package.json 使用本地文件引用路径指向你的拷贝出来后的目录（目录里也需要一个 package.json），然后开发时继续使用裸模块的形式而非具体路径，这样既使用的是本地代码、同时又能触发 Vite 的依赖预构建。

        再比如既然 Vite 本身不支持转换源码里的 CommonJS，那就加 vite-plugin-commonjs 之类的插件，然后代码里用 require() 导入。

        但我都不推荐，因为坑太多了。我估计题主能在这里提问，本身对这种模块化方案的差异理解就不会是很深刻。如果题主是打工人的话，与其浪费时间在这种 Corner-Case 上、最后还不一定能有结果的问题上，不如尽快把工作做完。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题