vue3+vite 打包Layui报错问题Rollup failed to resolve import “public/layui/css/layui.css“ from “index.html“.

前端资源打包问题与解决方案

最新推荐文章于 2025-09-04 16:56:18 发布

原创最新推荐文章于 2025-09-04 16:56:18 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

解决问题记录专栏收录该内容

7 篇文章

订阅专栏

博客讲述了在前端开发中遇到的一个问题，即在将layui框架放置于public文件夹下后，打包时出现资源找不到的错误。作者通过修改HTML中引用layui的路径，将相对路径改为绝对路径`/public/layui/...`，成功解决了打包失败的问题。这是一个关于前端项目构建和资源引用的常见问题及解决实例。

layui放在public文件夹下，然后在index.html中引入

<link rel="stylesheet" href=".layui/css/layui.css">
<script src="./layui/layui.js"></script>

结果打包报错，找不到这个资源
搜了一下，发现
在这里插入图片描述然后在index.html中改为绝对路径

<link rel="stylesheet" href="/public/layui/css/layui.css">
<script src="/public/layui/layui.js"></script>

打包成功
记录下问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Geeca

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3 - vite打包报错Rollup failed to resolve import “x/node_modules/ant-design-vue/x“ from “x“ This is mo

高级前端工程师

12-22

8040

vue3，vite，打包报错，ant design vue，vite 打包报错，vue3使用Vite打包报Rollup failed to resolve import “xxx/node_modules/ant-design-vue/xxxx，vite 打包报错：Error: [vite]: Rollup failed to resolve import，ant中time-range-picker组件没有直接导出，在使用vue3 + vite + ant design vue 的时候，引入一些antd的一

Vite+Vue3+UnoCSS打包报错Rollup failed to resolve import “virtual:uno.css“ from “E:/code/xxx/src/main.ts“

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

05-07

759

记得检查 vite.config.ts 是否正确注册了UnoCSS()插件！标题推荐"virtual:uno.css" 报错让我一头雾水，结果只因为少写了这一行vite+vue3+unocss打包炸裂？别忘了vite.config.ts加这句！UnoCSS 打包报错 virtual:uno.css？别笑，这个坑很多人踩了需要我配一个完整可运行的 GitHub 示例或 zip 包资源也可以提供，要不要一份？

参与评论您还未登录，请先登录后发表或查看评论

[bug] [vite]: Rollup failed to resolve import “axios“ from “src/api/request.js“.

heguu的博客

05-16

9563

在微信云托管上部署遭遇的bug 日志如下 [2022-05-16 18:01:08] [vite]: Rollup failed to resolve import "axios" from "src/api/request.js". [2022-05-16 18:01:08] This is most likely unintended because it can break your application at runtime. [2022-05-16 18:01:08] If you do wan

解决 Rollup failed to resolve import “vue3-json-viewer/dist/index.css“ from xxx

AllBluefm的专栏

09-04

687

出现这个现象的原因是：代码中需要按照 vue3-json-viewer/dist/index.css 这个路径引入index.css，但实际上node_modules中vue3-json-viewer并没有这个文件，因此报错了。出现这个现象的原因是：项目package.json中是"vue3-json-viewer": "^2.2.2",但实际上下载的vue3-json-viewer版本是2.4.1。出现这个现象的原因是：^是语义化版本 (semver) 的范围控制符。1、如果已经安装，需要先移除。

vite+vue3打包报Rollup failed to resolve import “foldName/cssName.css“ from “index.htm

qq_64803883的博客

02-24

2万+

最近有个新项目，技术leader决定使用v3+vite+element-plus。项目打起来后，开发环境非常顺利，可是一打包就凉了，报个错：一看到报错我很懵，这个css文件是在public中的，在html中直接引入，并没有使用import引入啊？经过N分钟的百度，n+分钟的查vite、rollup文档以及思前想后，终于在vite文档中发现了一句话： ...

vite 打包图片时报错 Rollup failed to resolve import ...

weixin_57849570的博客

08-04

7896

vite 打包图片时无法引入的 bug

vue3+vite - 安装引入Ant Design Vue组件库报错Failed t resolve import“ant-design-vue/dist/antd.css“ from x Does

高级前端工程师

12-22

7480

vue3，vite，ant design vue，组件库，安装引入报错，vue3使用antd报错，vue3引入ant组件库报错，antd.css这个引入失败怎么办，已经安装了Antd组件库但无法使用，报错无法解析antd.css文件，vue3.0引入antdv在main.ts中报错，vite + vue3引入ant design vue 报错，引入import ‘ant-design-vue/dist/antd.css‘时报错，详细解决方案，换版本也不行，详细解决方案，依旧报错，改了版本号，重新安装依赖也不

Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers

qq_42931285的博客

11-10

2051

uniapp、pinia-plugin-persistedstate一直报错

使用pnpm run build:dev时，报错：error during build: Error: [vite]: Rollup failed to resolve import “sortabl

m0_48978227的博客

02-27

2316

Rollup 在build构建过程中无法解析 sortablejs 模块的导入的路径。这个bug的产生可能会在运行时破坏应用程序。所以想显式地外部化这个模块，需要把它添加到导入到提示需要导入的路径。检查对应路径中，是否存在sortablejs 包，如果不存在，则安装依赖。如果存在，可以检查导入路径是否正确。重新构建，显示成功！

解决Rollup failed to resolve import “xxx“ from “xxx“报错

qq_31013993的博客

12-07

1万+

ERROR[vitel: Rollup failed to resolve import "xxx’from "xxx". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to 'build rollupOptions.external'

vite打包报错 Rollup failed to resolve，原因是高版本找不到依赖/node_modules的里面的文件

qq_57583768的博客

10-27

7516

vite打包报错 Rollup failed to resolve，原因是高版本找不到依赖/node_modules的里面的文件

vite打包报错 Rollup failed to resolve

最新发布

10-18

<think>我们正在处理Rollup无法解析导入 '@components/routingconfiguration-route-or-save.vue' 的问题。根据之前的对话，我们知道错误是：Rollup failed to resolve import '@components/routingconfiguration-route-or-save.vue' 可能的原因和解决方案： 1. 路径别名（alias）未正确配置：在Rollup中，我们需要配置别名来将`@`映射到正确的目录（通常是`src`目录）。 2. 文件扩展名：Rollup默认可能不会自动解析`.vue`扩展名，需要配置插件（如@rollup/plugin-node-resolve）来处理。 3. 插件顺序：确保处理Vue单文件组件的插件（如rollup-plugin-vue）在解析插件之后，以便正确处理.vue文件。 4. 文件是否存在：检查文件`routingconfiguration-route-or-save.vue`是否存在于`src/components`目录下。解决方案步骤：步骤1：确认文件存在确保在项目中的`src/components`目录下存在`routingconfiguration-route-or-save.vue`文件。步骤2：配置Rollup别名使用`@rollup/plugin-alias`插件来设置别名。在`rollup.config.js`中配置： ```javascript import alias from '@rollup/plugin-alias'; import path from 'path'; export default { // ...其他配置 plugins: [ alias({ entries: [ { find: '@', replacement: path.resolve(__dirname, 'src') } ] }), // 其他插件... ] }; ``` 步骤3：配置扩展名解析使用`@rollup/plugin-node-resolve`插件来解析扩展名（包括.vue）： ```javascript import resolve from '@rollup/plugin-node-resolve'; export default { plugins: [ resolve({ extensions: ['.js', '.vue', '.json'] // 添加需要解析的扩展名 }), // ...其他插件 ] }; ``` 步骤4：确保Vue插件已安装并配置需要安装`rollup-plugin-vue`（对于Vue2）或`unplugin-vue`（对于Vue3，同时支持Rollup）来处理.vue文件。对于Vue3，我们可以使用`unplugin-vue`： ```bash npm install unplugin-vue -D ``` 然后在`rollup.config.js`中： ```javascript import vue from 'unplugin-vue/rollup'; export default { plugins: [ vue(), // 处理.vue文件 // ...其他插件 ] }; ``` 步骤5：检查导入语句在代码中，我们应该这样导入： ```javascript import RoutingConfiguration from '@components/routingconfiguration-route-or-save.vue'; ``` 注意：别名`@`已经映射到`src`，因此`@components`相当于`src/components`。如果以上步骤都正确配置，Rollup应该能够正确解析导入。注意事项： - 如果使用TypeScript，还需要在`tsconfig.json`中配置路径别名： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 如果问题仍然存在，请检查Rollup配置文件的插件顺序，确保别名插件和解析插件在Vue插件之前。示例Rollup配置（Vue3）： ```javascript import alias from '@rollup/plugin-alias'; import resolve from '@rollup/plugin-node-resolve'; import vue from 'unplugin-vue/rollup'; import path from 'path'; export default { input: 'src/main.js', output: { // ... }, plugins: [ alias({ entries: [ { find: '@', replacement: path.resolve(__dirname, 'src') } ] }), resolve({ extensions: ['.js', '.vue', '.json'] }), vue({ // unplugin-vue 的选项，如果需要的话 }), // ...其他插件（如commonjs、json等） ] }; ``` 希望以上步骤能解决你的问题。相关问题： 1. Rollup中如何处理其他类型的文件（如SCSS，图片）？ 2. 如何配置Rollup以支持动态导入（code splitting）？ 3. 在Vue3项目中，除了Rollup，还有哪些推荐的打包工具？ 4. 如何解决Rollup打包时出现的其他常见解析错误？ 5. 在Rollup中如何配置生产环境和开发环境的不同构建？ </think>### Rollup 解析导入失败解决方案：`Unable to resolve import '@components/routingconfiguration-route-or-save.vue'` 该错误通常由路径别名配置问题或文件缺失引起。以下是逐步解决方案： --- #### 1. **确认文件物理路径** - 检查文件是否存在： ```bash # 在项目根目录执行 ls src/components/routingconfiguration-route-or-save.vue ``` - 如果文件不存在： - 检查文件名拼写（大小写敏感） - 确认文件是否位于 `src/components/` 目录下 #### 2. **配置 Rollup 路径别名** 在 `rollup.config.js` 中添加别名解析： ```javascript import alias from '@rollup/plugin-alias'; import path from 'path'; export default { plugins: [ alias({ entries: [ { find: '@', replacement: path.resolve(__dirname, 'src') }, { find: '@components', replacement: path.resolve(__dirname, 'src/components') } ] }), // ...其他插件 ] }; ``` - 📌 **关键点**： - 使用 `@rollup/plugin-alias` 处理路径映射 - `__dirname` 确保绝对路径准确性 #### 3. **添加文件扩展名解析** 在 `@rollup/plugin-node-resolve` 中显式声明 `.vue` 扩展名： ```javascript import resolve from '@rollup/plugin-node-resolve'; export default { plugins: [ resolve({ extensions: ['.js', '.vue', '.json'] // 添加 .vue 扩展名 }), // ...其他插件 ] }; ``` #### 4. **检查 Vue 插件配置** 确保已安装并配置 Vue 编译器插件： ```bash npm install @vitejs/plugin-vue --save-dev # Rollup 可用 rollup-plugin-vue ``` ```javascript import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue(), // 处理 .vue 单文件组件 // ...其他插件 ] }; ``` #### 5. **验证导入语句** 在代码文件中使用标准导入语法： ```javascript // 正确写法 (使用配置的别名) import RouteConfig from '@components/routingconfiguration-route-or-save.vue'; // 替代方案 (相对路径) import RouteConfig from './components/routingconfiguration-route-or-save.vue'; ``` #### 6. **检查 TypeScript 配置 (如适用)** 在 `tsconfig.json` 中添加路径映射： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"] } } } ``` --- ### 常见错误排查表 | 错误原因 | 症状 | 解决方案 | |-------------------------|-------------------------------|------------------------------| | 未配置 Rollup 别名 | 所有 `@/` 导入失败 | 添加 `@rollup/plugin-alias` | | 缺少 Vue 插件 | 所有 `.vue` 文件无法解析 | 安装并配置 `@vitejs/plugin-vue` | | 文件名大小写不匹配 | 仅特定文件报错 | 统一使用小写命名文件 | | 路径映射冲突 | 部分别名工作，部分失败 | 检查 `tsconfig.json` 和 `rollup.config.js` 的一致性 | --- ### 📝 配置示例完整 `rollup.config.js` 参考： ```javascript import alias from '@rollup/plugin-alias'; import resolve from '@rollup/plugin-node-resolve'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default { input: 'src/main.js', output: { /*...*/ }, plugins: [ alias({ entries: [ { find: '@', replacement: path.resolve(__dirname, 'src') }, { find: '@components', replacement: path.resolve(__dirname, 'src/components') } ] }), resolve({ extensions: ['.js', '.jsx', '.vue', '.ts'] }), vue(), ] }; ``` --- ### 🌟 相关拓展问题 1. Rollup 中如何处理其他静态资源（如图片/CSS）的路径解析？ 2. 在 Monorepo 项目中如何配置跨包的路径别名？ 3. Rollup 与 Webpack 在路径解析机制上有哪些核心差异？ 4. 如何为 Rollup 添加动态导入（code splitting）支持？ 5. 在 Vite 项目中遇到类似路径解析问题应如何解决？ > 路径解析是模块打包的核心基础，正确配置可大幅提升开发效率[^2]。建议使用 `import.meta.glob` 优化组件批量导入[^3]。