/vite-plugin-html-env

A vite plugin for rewriting html

Primary LanguageJavaScript

vite-plugin-html-env npm

A Vite Plugin for rewriting html

Usage

npm install --save-dev vite-plugin-html-env
# or
yarn add vite-plugin-html-env -D
// vite.config.js
import VitePluginHtmlEnv from 'vite-plugin-html-env'

export default {
  plugins: [
    VitePluginHtmlEnv(),
    // or
    // VitePluginHtmlEnv({
    //  CUSTOM_FIELD
    // })
  ]
}

It is recommended to use VITE_APP_ as the key prefix.

# .env
VITE_APP_TITLE=测试标题
VITE_APP_HOST=dev.sever****.com

# .env.build-prod
VITE_APP_TITLE=生产标题
VITE_APP_HOST=prod.sever.****.com

{
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "build:prod": "tsc && vite build --mode build-prod",
  }
}

By default, the local environment reads the .env file.Read the corresponding .env.*** file, when you configure the --mode command.Vite configuration instructions for .env files Env Variables and Modes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="//<% VITE_APP_HOST />/***.js"></script>
    <title><% VITE_APP_TITLE /></title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Config

  • {[key: string]: string | boolean | number}