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

静态设置

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

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

然后再index.html中添加：

<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

// 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

// 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

(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上传图片

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);
  }
}