vue 下配置标题栏 title 图标及文字的具体步骤

1 . 将图片.ico 文件放在项目根目录下

这里写图片描述

2 . 在 index.html 页面上配置图标及文字

在项目的index.html 中：

<head>
<title>标题栏文字</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>

1
2
3
4

3 . 修改 build 文件夹下 webpack.prod.conf.js 和 webpack.dev.conf.js 文件

webpack.prod.conf.js 和 webpack.dev.conf.js 文件都要添加以下内容：

var path = require('path') // 开头引入 path 模块
....
// HtmlWebpackPlugin 中添加 favicon
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: path.resolve('favicon.ico'), // 引入图片地址
inject: true
})

1
2
3
4
5
6
7
8
9

webpack.dev.conf.js文件
webpack.prod.conf.js文件

一般在webpack.prod.conf.js文件下已经引入了path, 但是在webpack.dev.conf.js 文件下没有引入，需要在webpack.dev.conf.js文件下引入一次：
这里写图片描述
4 . 重新启动项目即可。

npm install
npm run dev
---------------------
作者：lanc336
来源：CSDN
原文：https://blog.csdn.net/weixin_41767649/article/details/79986756
版权声明：本文为博主原创文章，转载请附上博文链接！

mounted() created里面也可以设置标题
document.title = "后台管理";

vue 下配置标题栏 title 图标及文字的具体步骤相关推荐

vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
vue cli3 配置上线本地图标转换base64 显示
chainWebpack: config => {config.module.rule('images').use('url-loader').loader('url-loader').tap( ...
vue 下拉框加图标
<div class="header-col" id="sbzjBox-js" style="position: relative;" ...
apache2配置支持php7,Ubuntu14.04服务器环境下配置PHP7.0+Apache2+Mysql5.7的方法
这篇文章主要介绍了Ubuntu14.04服务器环境下配置PHP7.0+Apache2+Mysql5.7的方法,较为详细的分析了Ubuntu14.04操作系统环境下配置PHP7.0+Apache2+My ...
vue配置svg，图标显示不出来
写在最前面:在Vue中使用svg主要靠webpack配置svg-sprite-loader来处理svg文件,如果有问题(配置流程按网上的教程一套下来或者直接是扒拉别人的代码还是有问题的),需要一点w ...
在vue.config.js下配置别名alias
在vue.config.js下配置别名alias module.exports = {configureWebpack: {resolve: {alias: {'assets': '@/assets' ...
vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
一键解决2K分辨率下ubuntu图标及文字太小问题
一键解决2K分辨率下ubuntu图标及文字太小问题在这里插入图片描述 1.打开虚拟机 2. 选择设置 3. 选择显示调到1.5,点应用
在Windows系统下如何将桌面图标下的文字隐藏
在Windows系统下如何将桌面图标下的文字隐藏第一步:你需要一台电脑(Windows系统的电脑哈!原谅我放屁哈!) 进入正题: 首先,win+R键打开运行窗口,输入"charmap&qu ...

vue 下配置标题栏 title 图标及文字的具体步骤

vue 下配置标题栏 title 图标及文字的具体步骤相关推荐

最新文章

热门文章