vue-cli 打包favicon.ico

2024-08-22

vue-cli 打包后显示favicon.ico小图标

第一步:favicon.ico小图标放在static里面第二步:index.html 文件中引入时需要写 ./ 相对路径第三部:npm run build 打包打包完成就可以看到 favicon.ico图标啦!!!

vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就会使路径错误: 解决办法: 办法一: 把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径: 具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译) 办法二:进行wepack配置:

vue中添加favicon.ico

1.首先将favicon.ico图片放在根目录下 2.修改webpack配置文件 1)找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: path.resolve('favicon.ico') // 新增 }), 2)找到build下的webpack.prod.conf.js文件 new HtmlW

Vue Cli 打包之后静态资源路径不对的解决方法

cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } 参考链接: 1. vue打包静态资源路径不正确的解决办法 2. V

VUE添加网站favicon.ico图标

1.修改webpack.dev.conf文件 webpack.prod.conf文件 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, // favicon: './favicon.ico' favicon: path.resolve('favicon.ico'), //新增}), 2.将ico放在根目录下

vue项目中 favicon.ico不能正确显示的问题

方法一:修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 方法二:修改webpack配置文件 1.找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: tr

解决Vue用Nginx做web服务器报错favicon.ico 404 (Not Found)的问题

有多种解决方案 1.vue静态资源 vue中为网页增加favicon的最便捷的方式为使用link标签 <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" rel="external nofollow" /> 先在static目录下添加favicon,至于为什么要在static下加,待会解释然后,在index.html入

axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 为什么跨域同源非同源自己去查吧,在webpack配置一下

【整理】 vue-cli 打包后显示favicon.ico小图标

vue-cli 打包后显示favicon.ico小图标 https://www.cnblogs.com/mmzuo-798/p/9285013.html

vue cli 3 打包过大问题

vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环境,可以将每一个环境的NODE_ENV设置成 'production' 模式.然后你的包就会很小了

Vue Cli 3 打包上线静态资源404问题解决方案

报错原因:静态资源丢失解决方案官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath. 在根目录创建vue.config.js 文件 // 请把代码文本粘贴到下方(请勿用图片代替代码) module.exports = { publicPath: './' } 重新用 npm run build 打包项目部署到服务器

vue的favicon.ico的不能修改替换问题解决。

vue的favicon.ico解决办法: 暴力替换图片: <link rel="icon" href="favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />转载:https://www.wandouip.com/t

@vue/cli 3 打包文件读取绝对路径处理

@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面遇到的小伙伴. vue.config.js module.exports = { // 这里是配置上线读取当前目录,默认是根路径,如 /js, /css 等,具体根据项目来 baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', //

vue cli 3

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service) 一个开发环境依赖,局部安装在每个 @vue/cli 创建的项目中. 可升级 ? 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展.-- cli 插件是用来给 we

[Vue 牛刀小试]：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍

一.前言在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整.因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定. PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当

一、Vue CLI

一.Vue CLI https://cli.vuejs.org/zh/guide/installation.html 介绍: 二.安装 # 安装 Vue Cli npm install -g @vue/cli 目的是可以让你使用Vue命令 # 访问Vue命令 vue --version 三.项目创建创建方式两种(vue create方式以及使用vue ui命令以图形化界面创建和管理项目) vue create方式创建 vue create hello-world 运行注意:npm run

Vue项目打包常见问题整理

Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘. 1.js 路径问题脚手架默认打包的路径为绝对路径,改为相对路径.修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’ build: { assetsPublicPath: './' } 2.img 路径问题在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicP

Vue CLI 3.x 简单体验

文档中文文档补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm推荐的新的包名规则,使用作用域.详情可查看此文章. 命令变化 vue -h 我们看到 create [options] <app-name> 创建一个由vue-cli-service支持的新项目 invoke <plugin> 在已创建的项目中添加插件 serve [options]

8.0 vue cli自定义页面

1.新建a.html(public文件夹下)文件,并设定div的id="a" <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g