vue3 环境变量 .env 设置 html 页面标题与logo

项目配置

 vue3 + vite

.env文件说明

根目录下创建 .env 文件

# .env
VITE_APP_TITLE = title
VITE_APP_LOGO = logo

 ***注：*** vue3+vite 必须使用 VITE 开头的配置信息 否则无法获取
 如果不想使用[VITE](https://so.csdn.net/so/search?q=VITE&spm=1001.2101.3001.7020)开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_”
 此次没实际设置过,感兴趣的可以自己查下

安装插件：vite-plugin-html

npm install vite-plugin-html -D

在 vite.config.js 中配置

在 vite.config.js 文件中 加入 createHtmlPlugin 与 loadEnv 的 引用

# vite.config.js

    ***

    import { defineConfig, loadEnv } from "vite";
    import { createHtmlPlugin } from "vite-plugin-html";


    const getViteEnv = (mode, target) => {
      return loadEnv(mode, process.cwd())[target];
    };

    export default ({ mode }) =>
      defineConfig({
        plugins: [
          vue(),
          createHtmlPlugin({
            inject: {
              data: {
                logo: getViteEnv(mode, "VITE_APP_LOGO"),
                title: getViteEnv(mode, "VITE_APP_TITLE"),
              },
            },
          }),
        ],

    ***

    });

在 index.html 中使用变量

    <link rel="icon" href="<%= logo %>">
    <title><%= title %></title>