vue3+vite项目在html中输出环境变量

vite+vue3项目，在html中使用环境变量

草莓不爱吃白菜

4264人浏览 · 2023-06-08 13:58:31

草莓不爱吃白菜 · 2023-06-08 13:58:31 发布

有两种办法

方法一

首先在vite.config.ts中进行配置要插入的变量内容，结合createHtmlPlugin插件

import { createHtmlPlugin } from 'vite-plugin-html';
import type { PluginOption } from 'vite';
  const htmlPlugin: PluginOption[] = createHtmlPlugin({
    minify: isBuild,
    inject: {
      // Inject data into ejs template
      data: {
        title: VITE_GLOB_APP_TITLE
        injectScript: `<script type="text/javascript" src="https://agent-gate-${VITE_GLOB_TR_REGION == '2'?'test-':''}${VITE_GLOB_TR_REGION}.cloud/js/ctilinks.js"></script>`
      },
      }
    });
    return htmlPlugin;

在这里title、injectScript就是要插入的变量名；
然后在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" />
    <meta
      content="xxx"
      name="keywords" />
    <link rel="icon" href="group.ico"/>
    <title><%= title %></title>
  </head>

  <body>
    <div id="app"></div>
    <%- injectScript %>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

方法二

Vite 本身支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

注意点：⚠️如果import.meta.env上不存在某个属性变量名，例如：VITE_NAME
在html，会表现为被忽略，而不进行替换。
但是在js，会查找不到，会被替换为 undefined。

over!

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^