本文整理了在 HBuilder X 中使用自动导入的完整流程，包括项目为什么没有 Node 环境、如何配置 vite.config.js、从 Git 拉取项目后应做什么，以及自动导入功能背后的原理。

适合所有使用较新 HBuilder X 版本进行 uni-app 开发的用户。

如果你是按旧版教程操作、或从旧版 HBuilder X 升级到新版后遇到自动导入报错，可直接查看文末的“写在最后”部分。

1. 项目里没有 package.json 和 node_modules

无论使用旧版还是新版 HBuilder X，在 IDE 中直接“新建 uni-app 项目”时，目录通常如下：

pages/
static/
App.vue
index.html
main.js
manifest.json
pages.json
uni.promisify.adaptor.js
uni.scss

这是一个纯前端模板，不属于 Node 工程，因此没有：

• package.json
• node_modules
• 任何 npm 插件

如果要使用 Vite 插件（例如自动导入），必须手动初始化 Node 环境。

2. 初始化 Node 环境

在项目根目录打开命令行，执行：

npm init -y
npm install

如果未生成 node_modules，可安装任意包触发创建，例如：

npm install express

完成后，项目即具备使用 Vite 插件的基础。

3. 添加 vite.config.js 启用自动导入

在项目根目录创建 vite.config.js：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    plugins: [
        uni(),
        AutoImport({
            imports: ['vue', 'uni-app']
        })
    ]
})

保存后重启 HBuilder X 或重新运行项目，使配置生效。

4. 自动导入是否生效的判断方式

无需写 import 的情况下使用以下代码：

const count = ref(0)

onLoad(() => {
    console.log('loaded')
})

若编辑器不报 “未定义” 错误，即说明自动导入已生效。

5. HBuilder X 并不是“自带自动导入插件”

这一点容易误解，需要说明清楚。

HBuilder X 并没有内置 unplugin-auto-import 这个 npm 包。
内置的是一种“自动导入能力”，由 HBuilder X 的 Vite 构建器提供。

区别如下：

• unplugin-auto-import 是一个独立的第三方 Vite 插件
• HBuilder X 构建器内置了等效功能，因此你不需要手动安装它
• 在纯 Vite+Vue 项目中使用时，仍然需要手动 npm install

也就是说：HBuilder X 支持这种自动导入行为，但插件本身不是它内置的文件，而是构建器实现的功能。

6. 从 Git 拉取项目后需要做什么

拉取到本地的项目通常不会带有 node_modules，这是 Git 的正常行为。

步骤如下：

1. 在项目根目录执行：

npm install

若包含 package.json，这一步即可恢复所有依赖。

2. 如果仓库里没有 package.json，需要先执行：

npm init -y
npm install

3. 确认 vite.config.js 是否放在项目根目录。 HBuilder X 只会读取根目录下的配置文件。
4. 若出现依赖冲突，可删除旧锁文件后重新安装：

rm -f package-lock.json
npm install

5. 重启 HBuilder X，使 Vite 配置重新加载。

7. 内容总结

在 HBuilder X 中使用自动导入，需要具备以下基础条件：

1. HBuilder X 新建项目默认没有 Node 环境，需要手动初始化
2. 添加 vite.config.js 才能启用自动导入
3. 新版 HBuilder X 不需要手动安装 unplugin-auto-import，因为构建器内置了等效实现
4. 从 Git 拉取项目后需重新安装依赖，并确认配置文件位置正确
5. 修改配置后最好重启 HBuilder X

到此，一个可用、可扩展的自动导入环境就搭建完成了。

写在最后
如果你是按照咸虾米的B站 uniapp 2024教程或 CSDN 如何实现从vue模块中自动导入 教程操作，并在新版 HBuilder X 中出现以下问题：

• 安装了 unplugin-auto-import
• 编译时报错
• 自动导入无法正常工作
  原因通常是：新版 HBuilder X 的构建器已经内置了自动导入能力，而手动安装的插件版本与内置实现冲突。

可以尝试执行：

npm uninstall unplugin-auto-import

卸载后重启 HBuilder X，一般即可恢复正常。