Module not found: Error: Can't resolve '../../assets/img/map.jpg' in 'E:\VUE\vue-agriculture\src\views'

时间: 2023-12-14 22:07:32 浏览: 161

网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1

在网站子目录部署Vue.js应用时，Webpack的打包资源配置至关重要，特别是对于资源文件路径的处理。Vue CLI生成的配置文件中，`publicPath`参数是关键，它定义了项目中所有资源的基础路径。例如，当应用部署在`https://www.wx2share.com/m/`下，`publicPath`应设置为`'/m/'`，确保所有资源路径前缀为`/m/`。在CSS中引用图片时，Webpack默认并不会处理这些路径。如以下CSS代码： ```css .content { background: url('/static/img/1.jpg'); } ``` 在打包后，Webpack不会自动将`/static/img/1.jpg`更改为`/m/static/img/1.jpg`，导致在线上环境无法找到图片资源，从而出现404错误。解决这个问题的方法是利用Webpack的`MiniCssExtractPlugin`插件和`url-loader`。安装这两个插件： ```bash npm install --save-dev mini-css-extract-plugin url-loader file-loader ``` 然后在`webpack.config.js`中进行如下配置： ```javascript module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')], }, }, ], }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 8192, // 只有小于8KB的图片会被转化为base64 name: '[name].[ext]?[hash]', outputPath: 'static/img', publicPath: '/m/static/img/', // 设置图片的公共路径 }, }, // ... ], }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css', }), // ... ], // ... }; ``` 这段配置会告诉Webpack如何处理CSS中的URL引用，将其转换为正确的路径。`MiniCssExtractPlugin.loader`将CSS从JavaScript文件中分离出来，而`url-loader`则处理图片资源，添加适当的公共路径前缀。这样，即使在子目录中部署，CSS中的图片引用也会被正确处理，如： ```css .content { background: url('/m/static/img/1.jpg'); } ``` 同时，`outputPath`配置用于指定图片输出的目录，而`publicPath`确保这些图片在浏览器中加载时带有正确的前缀`/m/static/img/`。 Vue.js结合Webpack在子目录部署时，要确保`publicPath`配置正确，并且使用`MiniCssExtractPlugin`和`url-loader`处理CSS中的图片引用，以避免资源加载失败。这样的配置方法能够确保你的应用在不同环境下都能正常工作，无论是在本地开发还是在线上部署。

这个错误的意思是在你的代码中找不到 '../../assets/img/map.jpg' 这个文件，可能是因为文件路径不正确或者该文件不存在。你可以检查一下文件路径是否正确，或者确认一下该文件是否存在。如果文件路径和文件名都没有问题，可能是因为你没有导入该文件，你可以在代码中通过 import 语句导入该文件。

阅读全文

Module not found: Error: Can't resolve '../../assets/img/map.jpg' in 'E:\VUE\vue-agriculture\src\views'

相关推荐

Vue 3 + Vite集成Bootstrap 5的步骤详解

Vue CLI 2.8.1：详解Webpack配置细节与关键路径

Module not found: Error: Can't resolve '../assets/ima/1.jpg' in 'E:\Program Files\vue\tourism-mall\src\views\Layout'

Module not found: Error: Can't resolve '../assets/imagebox/banner03' in 'D:\Xmthree\test_vue\src\components'

in ./src/components/swiperCom.vue?vue&type=script&lang=js& Module not found: Error: Can't resolve '../assets/img/乳猪' in 'E:\vscode文件\vue2\myfirstvue\src\components'这个错误怎么解决

Module not found: Error: Can't resolve '../assets/movieback.png' in 'D:\KSH\fwork\src'

Module not found: Error: Can't resolve 'normalize.css' in 'C:\Users\修振良\Desktop\erabbit-pc-vue-project02\src'

Module not found: Error: Can't resolve 'axios' in 'D:\1\LnternalOffice\vue2\src\network'

报错Module not found: Error: Can't resolve '@/components' in 'C:\Users\62427\kcgl\kcgl-web\src'

can't resolve './assets/iconfonts/iconfonts.less' vue

vue @import '@assets/less/common.less'; ^ can't resolve './@assets/less/comm

new URL('../../assets/img/applyList.png', import.meta.url).href 这个在vue中如何使用

Failed to resolve import "@/assets/avatar.png" from "src/views/user/UserAvatar.vue". Does the file exist?

src"../../assets/logo.png"

Can't resolve 'assets/img/bg.jpg' in 'D:\Program Files\idea\Idea Projects\test-ui\src\app\pages\login'

vue3 使用element plus报Failed to resolve import "element-plus/lib/theme-chalk/index.css" from "src\main.ts". Does the file exist

最新推荐

vue中img src 动态加载本地json的图片路径写法

加载 vue 远程代码的组件实例详解

vue2组件实现懒加载浅析

教师节主题班会.pptx

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"