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

小南瓜地

于 2021-10-08 15:22:49 发布

阅读量918

点赞数

分类专栏： vue学习文章标签： vue.js nodejs

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述:两套标题和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 buil