解决vue无法解析.ico结尾图片路径

最新推荐文章于 2023-11-30 16:09:24 发布
原创 最新推荐文章于 2023-11-30 16:09:24 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#解决vue无法解析.ico结尾图片路径

本文介绍了在Vue项目中遇到的ICO图标加载失败的问题及解决方案。通过修改webpack配置文件并重启服务来成功加载ICO格式的图标。 
<img src="../assets/img/favicon.ico">

上面路径是对的，可是报错说找不到，why？后来查找资料才发现，vue框架默认配置图片格式没有ico的，所以需要手动加上

在bulid/webpack.base.conf.js中有如下一行：

test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
上面这是已经加上ico的，但是发现还是报错，难道还有其他问题？

不是的，是因为改了配置后需要退出再启动服务才行。做完这些，应该就ok了。

Vue及Element UI&vue-element-admin简记
生活在别处
11-21 8680
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档
weixin_43416253的博客
04-16 4828
前言 一直想用uniapp开发个在线多人编辑Excel文档的APP，苦于一直没找到免费的开源库，今天心血来潮，和大神聊起知道有luckysheet这么个免费的东东，看了文档，还挺合适。立即撸起。虽说是中文开发文档，但对vue的支持并不好，uniapp就更坑了，各种大坑小坑天坑，坑得怀疑人生了。爬坑过程惨不忍睹，为了给后来者少爬点天坑，现把使用方法公布。如何按方法操作还是不行，请自行烧香。如需现场指导，请提供妹子一枚：） 一、Luckysheet是什么？ Luckysheet ，一款纯前端类似excel的在
解决vue项目打包后提示图片文件路径错误的问题
12-12
vue项目打包后在production模式下提示图片 ‘404（not found），在dev环境下好好的，打包了就提示这个错误。这是为什么呢，以前第一次使用vue-cli构建项目的的时候只有两个图片文件，当时部署后报错路径问题， 当时的想法就是简单粗暴，直接在build好的文件修改了文件路径，再后来项目中遇到了一大堆静态资源，修改路径显然是不行的，看了一下生成文件大概知道是文件目录改变了，所以引用的路径也要随之改变，网上最简单的方法是修改 ‘config/index.js’文件中的 build模块： // emplate for index.html index: path.resolv
vue识别不了.ico后缀的图片，显示[object Module]
ME_GIRL的博客
08-15 928
1.vue识别不了.ico后缀的图片，显示[object Module] 报错如下： 2.vue.config.js配置 module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|ico)$/i) .use('url-loader') .loader('url-loader') .t
vue项目报favicon.ico错误
andux的专栏
11-30 1117
而vue中使用svg文件，可以直接显示的。用chrome浏览器，就能正常显示。所以，出现这个问题，没有使用最新版的chrome浏览器，用最新的chrome浏览器就可以识别svg图形文件。这个需要到专门的在线制作ico图标的网站，将图片转换成ico图片。vue项目报favicon.ico错误，
引入icon.styl字体文件无法解析报错
想搞全栈的前端
03-27 519
问题 在一个vue项目中需要引入icon.styl文件，然而报错如下 解决办法 将相对路径改为绝对路径，如下： 编译成功：
vue引用icon字体文件时出错，These relative modules were not found: ./font/sell-icon.eot...
lxhzz0411的博客
08-23 7018
These relative modules were not found: ./font/sell-icon.eot... 最开始找了半天，查找是不是路径错了，改来改去还是不对 结果删掉还是不行，依然报那个错。 最后解决方案是： ...
前端技术 ES6、Vue、Node.js、NPM包管理器、Babel、模块化、Webpack、vue-admin-template-master框架、服务端渲染技术NUXT
qq_45491549的博客
08-05 1622
前端技术ES6入门ECMAScript 6 简介二、基本语法Node.js一、简介二、安装NPM一、简介二、使用npm管理项目BabelWebpack一、什么是Webpack二、Webpack安装三、初始化项目四、JS打包五、CSS打包 ES6入门 ECMAScript 6 简介   ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言
Vue基础6天实施笔记
weixin_44867717的博客
02-09 2087
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
const path = require('path'); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/product-data/' : '/', assetsDir: 'static', configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@components': path.resolve(__dirname, 'src/components'), '@views': path.resolve(__dirname, 'src/views'), }, }, plugins: [ new (require('webpack').DefinePlugin)({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false }) ] }, // 开发服务器配置 devServer: { proxy: { // 使用环境变量中的API地址作为代理目标 '/api': { target: process.env.VUE_APP_BASE_API, changeOrigin: true, pathRewrite: { '^/api': '' } } }, client: { overlay: false }, // 新增端口配置，支持环境变量或默认值 port: process.env.VUE_APP_PORT }, // 生产环境配置 productionSourceMap: false, css: { extract: true, }, chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = '产品数据管理系统'; return args; }); } };从提供的 index.html 内容来看，静态资源路径未包含上下文路径 /product-data/，导致浏览器请求时直接访问根路径下的 /static/，从而触发 404 错误。以下是详细的修复方案： 一、问题原因分析 1. 资源路径缺失上下文前缀 当前 index.html 中的资源路径： html 预览 <script defer src="/static/js/chunk-vendors.js"></script> <link href="/static/css/app.765bed1d.css" rel="stylesheet"> 问题：路径以 /static/ 开头，未包含上下文路径 /product-data/，导致浏览器请求 http://localhost:8080/static/...，而实际资源位于 http://localhost:8080/product-data/static/...。 2. Vue 配置中的 publicPath 错误 若 vue.config.js 中 publicPath 未正确设置为 /product-data/，打包后会生成错误的资源路径。
06-24
- 强制浏览器将所有相对路径解析为绝对路径 - 使用 EJS 语法动态切换开发/生产环境 3. **输出路径**： - `outputDir: 'dist/product-data'` 确保物理路径匹配 - 避免部署时文件位置错乱 4. **服务器路由**： ...
'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const CompressionPlugin = require('compression-webpack-plugin') const name = process.env.VUE_APP_TITLE || '其亚管理系统' // 网页标题 const port = process.env.port || process.env.npm_config_port || 80 // 端口 // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分，具体配置参考文档 module.exports = { chainWebpack: config => { config.module .rule('tinymce') .test(/tinymce\/.*\.js$/) .use('babel-loader') .loader('babel-loader') .end() }, // 部署生产环境和开发环境下的URL。 // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上 // 例如 https://www.qiya.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.qiya.vip/admin/，则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/" : "/", // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist） outputDir: 'dist', // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下） assetsDir: 'static', // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false, transpileDependencies: ['quill'], // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: 81, open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://218.31.203.46:8081`, hangeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' }, } }, disableHostCheck: true }, css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } }, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } }, plugins: [ // http://doc.qiya.vip/qiya-vue/other/faq.html#使用gzip解压缩静态文件 new CompressionPlugin({ cache: false, // 不启用文件缓存 test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式 filename: '[path][base].gz[query]', // 压缩后的文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩 deleteOriginalAssets: false // 压缩后删除原文件 }) ], }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() config.when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') }) } } 这个是我在开发时对前端项目做的代理，现在我要部署到我本地的nginx上，我的nginx.conf配置如下：# 必须的全局配置 worker_processes 1; events { worker_connections 1024; } # 所有 server 块必须包含在 http 块内 http { include mime.types; default_type application/octet-stream; # 日志格式 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log logs/access.log main; error_log logs/error.log; sendfile on; keepalive_timeout 65; # 您的应用配置开始 server { listen 80; server_name 172.26.26.38; # 替换为您的域名或服务器IP root dist_HTGL; # 应该是目录，不是文件 # 启用 Gzip 静态文件支持 gzip_static on; gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 路由 history 模式支持 location / { index index.html; try_files $uri $uri/ /index.html; # 缓存配置 if ($request_filename ~* .*\.(?:js|css|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$) { expires 365d; add_header Cache-Control "public, immutable"; } } # 静态资源目录 location /static/ { alias dist_HTGL/static/; expires max; add_header Cache-Control "public, immutable"; access_log off; } # API 代理配置 location ^~ /process.env.VUE_APP_BASE_API/ { proxy_pass http://218.31.203.46:8081; # 请求头处理 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # WebSocket 支持 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # 超时设置 proxy_connect_timeout 60s; proxy_read_timeout 600s; proxy_send_timeout 600s; } # 禁止访问敏感文件 location ~ /\.(env|git) { deny all; return 403; } # 错误页面 error_page 404 /index.html; error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # 可选：HTTP 重定向到 HTTPS server { listen 80; server_name your-domain.com; return 301 https://$host$request_uri; } } 为什么启动后我登录请求的验证码获取不到
最新发布
08-30
- `process.env.VUE_APP_BASE_API` 是 Node.js 环境变量，Nginx 无法解析 - 应该使用 **实际值** 替换（如 `/api`） - 缺少 URL 重写的斜杠导致路径拼接错误 2. **静态资源路径问题**： ```nginx root dist_...
vue项目中 favicon.ico不能正确显示的问题
weixin_30784945的博客
07-02 838
方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 方法二：修改webpack配置文件 1、找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({ filename: 'index...
如何 更换vue的图标_vue中更换.ico图标报错路径找不到图片
weixin_39856269的博客
12-19 1622
问题描述：vue项目中，想要更换.ico图片，更换完成后刷新页面报错，找不到路径。解决：更换完图片，重新启动下vue项目(npm run dev)就可以啦~ 哈哈哈补充知识：网页title旁边的小图片设置，图片要求格式必须是.ico，附加ico图片转换地址：http://www.bitbug.net在html文件中的标签中加上：在vue项目中，favicon图标是在webpack.dev.conf...
vue.js打包之后，带参数的路由无法解析
如需咨询可联系我，V：chen2318341674
01-27 1021
vue项目做完后，未打包的时候一切正常，npm run build打包部署到服务器后却发现，带参数的路由都无法解析，出现如下界面： 试了很多在百度的办法： 1：修改config/index.js文件assetsPublicPath； 2：修改路由模式，加上/删除 mode: ‘history’ 这句话； 3：修改跳转链接的方式； … 总之都试遍了还是不行； 最后的解决方案如下： 修改Nginx部署的配置，跟传统一样配置好之后，　增加 try_files $uri $uri/ /index.html; 这
vue加载静态文件，不解析到路径
qq_34631220的博客
03-10 560
在public文件夹新建static文件夹 如何房static文件夹的内容直接/static/文件名，就可以了
vue目录解析
qq_38847914的博客
05-17 337
vue-cli目录解析： build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下2. webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。 config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者...
Vue项目中ico问题
m0_37811924的博客
10-10 508
ico不显示的问题 在用vue脚手架搭建的项目中发现页面标题的ico图标总也显示不出来，后来发现不仅仅是需要在<head>里面写上<link rel="shortcut icon" href="./favicon.ico">就可以的，还需要配置一下webpack的配置。 webpack.dev.conf.js //在webpack.dev.conf.js里面的pligins...
关于Vue中对所做网站ico的解决办法
CherryLee_1210的博客
06-05 1685
今儿在做项目中，老大让处理一下网站图标对问题（之前自己网站没有ico）。 由于自己的网站是用vue进行开发的。所以必须考虑到如何用vue进行解决。 第一 我们得先找到一个制作网站ico的网站，在这里我就先给大家提供一个吧，如果各位有更好的，烦请私信我哦！ http://www.bitbug.net/ 比特虫一个制作网站ico的网站。 第二 根据网站的指导，将需要做成ico的图片做成...
vue的favicon.ico不显示
10-11
在Vue中，如果你的favicon.ico图标没有显示，可能有以下几个原因： 1. 确保你的favicon.ico图标文件在正确的位置。根据你提供的引用内容，它应该放在项目根目录下。 2. 确保你的HTML模板文件中正确引用了favicon.ico...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值