uni-app vue3项目添加vite.config.ts后启动报错

uni-app vue3项目添加vite.config.ts后启动报错

开发环境 版本号 项目创建方式
Mac macos 26.1 HBuilderX

示例代码：

import { defineConfig } from 'vite';  
import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni';  

export default defineConfig({  
    plugins: [uni()],  
});

操作步骤：

  • 项目根目录新建 vite.config.ts
  • 添加基础配置后项目无法启动，ide提示找不到[@dcloudio](/user/dcloudio)/vite-plugin-uni

预期结果：

  • 项目正常运行，并可读取到vite.config.ts中的配置

实际结果：

  • 项目启动报错

bug描述：

项目需要用到vite的一些功能。参考 https://uniapp.dcloud.net.cn/collocation/vite-config.html 后在项目中新建了vite.config.ts

并复制了最基础配置到文件中

import { defineConfig } from 'vite';  
import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni';  

export default defineConfig({  
    plugins: [uni()],  
});

有两个错误

  1. '[@dcloudio](/user/dcloudio)/vite-plugin-uni'下方报红线，提示 “找不到模块“@dcloudio/vite-plugin-uni”或其相应的类型声明。”
  2. 运行时报错
✘ [ERROR] "vite" resolved to an ESM file. ESM file cannot be loaded by require. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.

14:07:31.372     node_modules/esbuild/lib/main.js:1374:27:
14:07:31.372       1374 │         let result = await callback({
14:07:31.372            ╵                            ^
14:07:31.372     at file:///Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68630:35
14:07:31.372     at requestCallbacks.on-resolve (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1374:28)
14:07:31.372     at handleRequest (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:732:17)
14:07:31.372     at handleIncomingPacket (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:757:7)
14:07:31.372     at Socket.readFromStdout (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:680:7)
14:07:31.372     at Socket.emit (node:events:517:28)
14:07:31.372     at addChunk (node:internal/streams/readable:368:12)
14:07:31.372     at readableAddChunk (node:internal/streams/readable:341:9)
14:07:31.372     at Readable.push (node:internal/streams/readable:278:10)
14:07:31.372     at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
14:07:31.373   This error came from the "onResolve" callback registered here:
14:07:31.373     node_modules/esbuild/lib/main.js:1293:20:
14:07:31.373       1293 │       let promise = setup({
14:07:31.373            ╵                     ^
14:07:31.373     at setup (file:///Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68594:27)
14:07:31.373     at handlePlugins (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1293:21)
14:07:31.373     at buildOrContextImpl (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:979:5)
14:07:31.373     at Object.buildOrContext (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:788:5)
14:07:31.373     at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:2215:15
14:07:31.373     at new Promise (<anonymous>)
14:07:31.373     at Object.build (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:2214:25)
14:07:31.373     at build (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:2047:51)
14:07:31.373     at bundleConfigFile (file:///Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68553:26)
14:07:31.373   The plugin "externalize-deps" was triggered by this import
14:07:31.373     ../../../../../../Users/yukino/MyCode/lihua-app/vite.config.ts:1:297:
14:07:31.373       1 │ ...Code/lihua-app/vite.config.ts";import { defineConfig } from 'vite';
14:07:31.373         ╵                                                                ~
14:07:31.383 failed to load config from /Users/yukino/MyCode/lihua-app/vite.config.ts
14:07:31.383 error during build:
14:07:31.383 Error: Build failed with 1 error:
14:07:31.383 node_modules/esbuild/lib/main.js:1374:27: ERROR: [plugin: externalize-deps] "vite" resolved to an ESM file. ESM file cannot be loaded by require. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
14:07:31.383     at failureErrorWithLog (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1651:15)
14:07:31.383     at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1059:25
14:07:31.383     at runOnEndCallbacks (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1486:45)
14:07:31.383     at buildResponseToResult (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1057:7)
14:07:31.383     at /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:1086:16
14:07:31.383     at responseCallbacks.<computed> (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:704:9)
14:07:31.383     at handleIncomingPacket (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:764:9)
14:07:31.383     at Socket.readFromStdout (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/esbuild/lib/main.js:680:7)
14:07:31.384     at Socket.emit (node:events:517:28)
14:07:31.384     at addChunk (node:internal/streams/readable:368:12)
14:07:31.392 已停止运行...


更多关于uni-app vue3项目添加vite.config.ts后启动报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

【问题解决，此帖终结】

参考官方demo，在package.json中补全依赖 https://gitee.com/dcloud/uni-preset-vue/blob/vite/package.json
在package.json中设置type为commonjs

更多关于uni-app vue3项目添加vite.config.ts后启动报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


【新问题】 17:00:30.383 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。 17:00:30.383 编译器版本：4.76（vue3） 17:00:30.383 正在编译中… 17:00:31.234 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。 17:00:31.235 编译器版本：4.76（vue3）
每次启动会编译两次…

这个问题主要是由于HBuilderX内置的uni-app cli环境与本地vite配置的模块系统不兼容导致的。错误信息显示ESM模块无法被require加载，说明HBuilderX内部使用的是CommonJS模块系统。

解决方案：

  1. 检查项目package.json中的type字段，确保设置为"module"
{
  "type": "module"
}
  1. 如果使用HBuilderX创建的项目，建议通过命令行安装依赖：
npm install [@dcloudio](/user/dcloudio)/vite-plugin-uni --save-dev
  1. 或者将vite.config.ts改为vite.config.js，使用CommonJS语法：
const { defineConfig } = require('vite');
const uni = require('[@dcloudio](/user/dcloudio)/vite-plugin-uni');

module.exports = defineConfig({
    plugins: [uni()],
});
  1. 确保已正确安装相关依赖：
npm install vite [@dcloudio](/user/dcloudio)/vite-plugin-uni --save-dev
回到顶部