打包项目，动态更改标题和icon

最新推荐文章于 2026-06-22 12:11:33 发布

原创最新推荐文章于 2026-06-22 12:11:33 发布 · 1.0k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #nodejs

vue学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue.js项目中根据不同的打包命令动态更改应用的标题和图标。通过创建不同环境的.env文件，配合package.json的打包命令实现两套配置。打包后，通过在public和src目录下修改config.js文件，并在main.js中引入，实现在dist文件中动态调整标题和icon。

问题描述:两套标题和icon，切换打包命令，动态更改
解决方法:
1.创建三个文件
在这里插入图片描述
.env（默认）

VUE_APP_CLIENT_TYPE=maxcn
VUE_APP_ICON=first.ico
VUE_APP_TITLE=第一套标题

.env.cs

VUE_APP_CLIENT_TYPE=cs
VUE_APP_ICON=second.ico
VUE_APP_TITLE=第二套标题
NODE_ENV=production

.env.maxcn

VUE_APP_CLIENT_TYPE=maxcn
VUE_APP_ICON=first.ico
VUE_APP_TITLE=第一套标题
NODE_ENV=production

.package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode maxcn",
    "build-cs": "vue-cli-service build --mode cs",
    "build-maxcn": "vue-cli-service build --mode maxcn",
    "lint": "vue-cli-service lint"
  },

打包第一套：npm run build || npm run build-maxcn
打包第二套：npm run build-cs
问题描述:打完包后，在dist文件中动态更改标题和icon
解决方法:
1.在public文件夹下新建config.js文件
在这里插入图片描述

config.js里面写入需要动态更改的变量
/**
 * 修改logo 步骤：
 *      1. 将需要更换的logo, 找美工切成三种大小：142 * 102、178 * 51, 然后分别重命名为 login_logo.png（登录界面）、logo.png（菜单栏）、
 *      2. 拿美工切好的 48 * 48的这张图片, 去 https://www.aconvert.com/cn/icon/png-to-ico/, 这个网站可以将 png 转换成 ico格式
 *          define_env== 'maxcn'(默认公司or其他公司)命名为favicon.ico。将这个图片放到项目根目录。
 *      3. 修改当前文件 copyrightText 这个变量, 改为对应公司的版权信息。
 *      4. 刷新浏览器查看效果
 */

var define_env = 'maxcn'; // 可选值 maxcn | cs

// 页面tab 栏标题
var title = '';
// tab栏icon
var tabIcon = './favicon.ico';
// 页面底部的版权信息文字
var copyrightText = '';
// 公司名称
var companyName = '';


!(function () {
  var link = document.createElement('link');
  link.rel = 'icon';

  if (define_env === 'cs') {
    // tab栏icon
    title = '';
    // 设置页面底部版权文字
    copyrightText = '';
    // 设置浏览器标题栏icon
    tabIcon = './favicon_cs.ico';
    // 公司名称
    companyName = '';
  
  }

  link.href = tabIcon;
  document.head.appendChild(link);
  // 设置tab中的标题
  document.title = title;
})();

index.html里面更改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="./config.js"></script>

</head>

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

</html>

2.在src中新建一个文件夹mixins(名称随意),在mixins文件夹中新建config.js(名称随意)文件
在这里插入图片描述
config.js里写入

/**
 *  用于混入 public/config中的变量, 用于切换图标
 */
export default {
  data() {
    return {
      // 这几个变量是在 public/config.js中定义的
      copyrightText, //版权
      define_env, // maxcn || cs
      companyName, //公司名称
      projectName, //项目名称
    };
  },
};

main.js里引入

// 配置图标和标题
import Config from '@/mixins/config';
// 全局混入配置
Vue.mixin(Config);