vue + spring boot项目的favicon解决方案

最新推荐文章于 2024-09-22 09:40:28 发布

原创最新推荐文章于 2024-09-22 09:40:28 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 3 个专栏收录

17 篇文章

订阅专栏

Eclipse

13 篇文章

订阅专栏

Javascript

11 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中使用Maven打包自定义的favicon图标，通过修改Vue项目中的webpack.prod.conf.js文件，添加favicon配置，实现图标自定义，并强调部署后需清理浏览器缓存。

对于Spring boot通常我们会采用maven方式统一将前后台代码打包在一起进行部署，往往页面的favicon是默认的绿叶图标，下面讲一下如何自定义favicon.

在Vue的项目代码中build文件夹，修改文件webpack.prod.conf.js

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      ......

添加关于favicon打包配置，例如：

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      favicon: path.resolve('./favicon.ico'),
      ......

通常把自定义的图标文件和index.html放在一起，这样maven打包后的文件自动包括了favicon.ico文件。

注意，在部署以后需要清理浏览器缓存，这样就可以看到自定义图标出现了。

Good Luck.

Cheers!