vue-cli项目设置favicon以及动态修改favicon

静态设置

动态更新之前需要有一个默认的favicon。

使用vue-cli搭建的vue项目里面已经有了一个static目录,存放静态文件。favicon图片放到该目录下。

然后再index.html中添加:

1
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

然后刷新浏览器,就会更新。

html-webpack-plugin设置

vue-cli脚手架默认安装了html-webpack-plugin,修改build目录下:

build/webpack.dev.conf.js

1
2
3
4
5
6
7
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('./static/favicon.ico') // 配置favicon.ico
})

build/webpack.prod.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('./static/favicon.ico'), // 配置favicon.ico
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),

注意:配置favicon图标的路径是相对路径

动态设置

如何从服务器动态获取图片呢,这样就可以像上传文件一样,随意更换favicon。

方法:动态创建link标签,然后添加元素

参考:https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically

1
2
3
4
5
6
7
(function() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackoverflow.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);
})();

附:使用axios上传图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
uploadFavicon (val) {
let that = this;
let Fr = new FileReader;
let file = val.target.files[0];
//获取需要更换的img标签的id
let img = document.getElementById(val.srcElement.name.split('|')[0]);
Fr.readAsDataURL(file);
Fr.onloadend = function () {
img.src = this.result;
};
let fd = new FormData();
//addend('参数名', '参数值'),参数名需要和后端对应
fd.append('InputFile', file);
fd.append('logo_id', val.srcElement.name.split('|')[1]);
//vue项目中为了方便更改一下axios原型链,其实就是发送一个axios请求
that.Axios.post(that.prefix + '/appblog/logo_update/', fd, new Blob([fd], { type: 'multipart/form-data' }))
.then(function (res) {
if (res.data.status == 1) {
util.notification('success', '成功', res.data.success_msg);
} else {
util.notification('error', '失败', res.data.error_msg);
}
img.value = '';
})
.catch(function (err) {
console.log(err);
});
//上传之后修改了一下axios的原型链,因为全局其他页面都需要
that.Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
that.Axios.defaults.transformRequest = function (data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret.slice(0, ret.length - 1);
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :