Module not found: Error: Can‘t resolve ‘@/assets/1.png‘ in ‘E:\code\2.0\myapp\src\components‘

最新推荐文章于 2025-01-11 08:18:26 发布

原创最新推荐文章于 2025-01-11 08:18:26 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webview #vue.js #android

笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了两种解决背景图片路径报错的方法：一是调整路径符号，二是使用绝对路径。这两种方法适用于大多数路径配置错误的情况。

出现这个报错大多是路径的问题

方法一：

将以下代码

background-image: url('@/assets/images/login.png');

改为

background-image: url('~@/assets/images/login.png');

方法2：

如果方法一没有解决问题那就试试方法2

将地址改成绝对地址，去掉@

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

加菲大帅猫

关注关注

0
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Module not found: Error: Can't resolve '@/components/achievement/echartsPage' in '/app/src/views/ach

程裕强的专栏

03-17

6607

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/achievement/CategoryDepart.vue Module not found: Error: Can't resolve '@/componen...

Webpack：Module not found: Error: Can't resolve './dist/bundle2.js' in 'F:\Workspaces\

daponi的博客

11-07

5384

最近学Vue有要学习webpack ,用的webpack 版本是：4.41.2版本的，在打包过程用执行了这个命令 webpack .\src\main.js .\dist\bundle.js 1.然后就报了下边的错误：后来查看之后原来是版本的问题，我用的这个wepack 版本过高，原来的命令即3.x的wepack在现在新版的已经不...

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

《Webpack 报错》Module not found: Error: Can‘t resolve ‘./@/assets/image/folder.png‘

前端技术

02-16

5892

打包时编译 png 图片错误，检查 webpack.config.js 文件发现缺少 module.rules 配置： { test: /\.(png|jpg|gif|svg)$/, loader: "url-loader", options: { limit:1024000, name: "[name].[ext]?[hash]" } }

Vue报错：Can‘t resolve

m0_57434037的博客

01-20

3万+

1.vue配置路由如果出现can not resolve“@src/test/demo”,那极有可能你的路径写错了，或者路径和上面的写重复了，检查路径 2.引用路径时，文件后缀.js/.vue什么的没有写全

vue - Error: Can't resolve '@/assets/img/github.svg （vue-cli3.0,无法解析.svg图片，已解决）...

dayu5595的博客

08-17

5575

用vue脚手架（vue-cli3.0）生成的目录，无法解析.svg图片的问题 <img src="@/assets/img/github.svg" alt="github" /> //Error: Can't resolve '@/assets/img/github.svg 解决方案： cnpm i -D svg-baker-runtime ...

vue项目中添加背景图片报错Module not found: Error: Can't resolve './@/assets/images/login.png'

dongwang的博客

05-10

1万+

将以下代码 background-image: url('@/assets/images/login.png'); 改为 background-image: url('~@/assets/images/login.png');

Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案

最新发布

suiusoar

01-11

902

模块未找到：错误：无法解析 './app'，路径：'/home/user/Desktop/my_app/src'

解决React使用material-ui组件库时报错：Module not found: Can‘t resolve ‘@mui/material/xxxx

m0_52364694的博客

09-26

4269

先看官网引入代码 import Button from '@mui/material/Button'; 这段代码实际上是错误的(可能是组件库更新了官网没及时更新) 错误实际上是路径错误。最新版的组件路径已经变成：@material-ui目录下的 core文件夹中(node_modules可以找到@material-ui)，所以正确引入代码为（以按钮为例） import Button from '@material-ui/core/Button'; 使用这个按钮 function App() { re

Error: Can‘t resolve ‘@/components/uni-grid/uni-grid.vue‘

qiuyushuofeng的专栏

06-02

1012

uni-ui中grid组件的使用

react启动项目报错：Module not found: Error: Can‘t resolve ‘@/路径‘ in ‘路径‘

weixin_53198972的博客

08-02

3112

原因：这个错误是由于create-react-app项目已经不再维护，所以babel-preset-react-app依赖的 "@babel/plugin-proposal-private-property-in-object"包可能不再更新，导致出现未声明依赖的错误。文件中添加"@babel/plugin-proposal-private-property-in-object"包到devDependencies中。原因：webpack没有对@绝对路径进行配置，导致没有办法识别该路径。

引入组件时的错误：Module not found: Error: Can‘t resolve ‘@/pages/Search‘

cqy657675321的博客

04-22

3170

组件引入时出错

Module not found: Error: Can‘t resolve ‘@/components/person/editPhoneNum‘ in ‘F:\jy\juyi_dataplat_we

暂时还没想好博客简介

11-21

2522

抽取页面中的组件作为子组件时候报错如下 Module not found: Error: Can't resolve '@/components/person/editPhoneNum' in 'F:\jy\juyi_dataplat_we 找不到模块：错误：无法解析'F:\jy\juyi_datalat_we中的'@/components/perse/editPhoneNum'

报错：Can‘t resolve ‘@ant-design/icons‘

m0_72607221的博客

07-15

6613

react启动项目 npm报错

很离谱的错误Module not found: Error: Can‘t resolve ‘@/api/order‘ in ERROR in ./src/views/pay/index.vue?vue

G24gg的博客

04-25

433

导入包没错，试了N遍，最后删除文件，从新建了下好了。

Vue为什么报错 Can't resolve '@/components/index.vue'

qq_44707265的博客

05-14

1万+

看看是不是路径问题，如果是根据，前面记得加@/ 如果是当前目录加./ 不能写相对路径

vue告警出现can‘t resolve “@/src/test/demo”

qq_42070758的博客

04-27

1万+

小问题记录： vue配置路由如果出现can not resolve“@/src/test/demo”,那极有可能你的路径写错了，或者路径和上面的写重复了，检查路径

Can‘t resolve ‘@babel/runtime/helpers/esm/extends‘的解决方法

BHSZZY的博客

05-30

2847

一种解决方法，可以试试

Module not found: Error: Can't resolve '@/assets/css/theme/index.css'

12-29

### 解决 Webpack 中 Module Not Found 错误当遇到 `Module not found: Error: Can't resolve 'assets/css/theme/index.css'` 的错误时，通常是因为 Webpack 在解析 CSS 文件中的路径时遇到了问题。具体来说，在使用 `@import` 语句导入 CSS 文件时，Webpack 默认将其解释为绝对路径[^1]。 #### 配置 Path Alias (路径别名) 为了使 Webpack 正确解析这些路径，可以在项目的 Webpack 或 Vue CLI 配置中设置路径别名。对于基于 Vue CLI 构建的应用程序，可以通过修改 `vue.config.js` 来实现这一点： ```javascript // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { '@': require('path').resolve(__dirname, './src'), assets: require('path').resolve(__dirname, './src/assets') } } } }; ``` 这段代码定义了一个名为 `@` 的别名指向源码目录 (`./src`) ，以及另一个名为 `assets` 的别名指向资源文件夹(`./src/assets`)[^3]。 #### 安装必要的 Loader 除了配置路径外，还需要确保已经安装了能够处理 CSS 文件的相关 loader 。根据描述，可能缺少的是 `css-loader`, 还有用于提取样式到单独文件的 `mini-css-extract-plugin` 和支持 URL 路径重写的 `file-loader`: ```bash npm install --save-dev css-loader mini-css-extract-plugin file-loader ``` 完成上述操作之后，应该更新 Webpack 配置来应用新加载器。如果是通过 Vue CLI 创建的项目，则不需要手动编辑 Webpack 配置；只需要确保已正确设置了别名即可[^2]。 #### 修改 Base URL 设置另外需要注意的是，如果应用程序部署在一个子路径下而不是根域名上，那么也需要调整 `publicPath` 参数以匹配实际环境下的基础 URL 地址[^4]: ```javascript // vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/' } ``` 这样做的目的是让构建出来的静态资源链接能正确反映它们在网络服务器上的位置关系。