解决修改浏览器title的logo不显示问题,附加本地运行打包的dist文件方法

这篇博客介绍了如何在包含build文件的Vue项目中修改Logo,并确保修改在本地及线上生效。主要涉及修改webpack.dev.conf.js和webpack.prod.conf.js两处配置,添加favicon属性指向新的Logo图片。在本地运行项目时,通过npm run build打包,然后使用http-server启动服务查看线上效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

旧版本含build文件的vue项目修改logo

在build文件下的webpack.dev.conf.js 修改如下信息:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  favicon:'./src/assets/logo.png' // 添加logo代码
}),

在build文件下的webpack.prod.conf.js 修改如下信息:

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency',
  favicon:'./src/assets/logo.png' //添加logo代码
}),

特别注意的是修改了webpack.dev.conf.js文件下,本地运行项目,logo是改变了,然而项目打包dist到线上时候还是没用,因为需要修改第二个文件,也就是修改配置线上的文件webpack.prod.conf.js 即可

本地运行dist文件

npm i -g http-server (全局安装http-server)
npm run build打包后进入dist文件,控制台输入:http-server即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值