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

有两种办法

方法一

首先在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: ``
      },
      }
    });
    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,js,html,前端,vue.js,vue3,vite)