创建不同的环境

`.env`文件

.env.[mode] // 设置指定的模式

创建对应环境的文件

根目录下创建配置文件为.env.production.china, 模式是production.china

自定义环境变量

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

-- .env.production.china --

VITE_APP_TITLE=中国地区

VITE_xxxxx=xxxx

打包配置

基本信息

-- package.json -- 

"build": vite build // 一般情况下打包正式环境的命令 => vite build -- mode production

备注：默认情况下模式都会被覆盖掉，可以使用--mode改写（文档）

其对应的环境是production生产环境,对应的配置文件名称为.env.production

对应环境的打包命令设置

package.json补充打包命令

-- package.json -- 

"build": vite build // 一般情况下打包正式环境的命令 == vite build -- mode production
+ "build:china": vite build --mode production.china

使用

使用一 html文件的title设置

安装插件

npm i vite-plugin-html

在配置文件中设置

-- vite.config.js --

import { defineConfig, loadEnv } from 'vite';
// 引入插件
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig(({ command, mode }) => ({
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          // 设置标题
          title: loadEnv(mode, process.cwd())[VITE_APP_TITLE]
        }
      }
    })
  ],
}))

index.html中使用

<title><%- title %></title>

使用二页面应用中设置

<template>
 {{ phone }}
</template>

<script setup>
import { computed } from 'vue';

const envConfig = import.meta.env;
const phone = computed(() => envConfig.VITE_PHONE)
</script>

vite - 环境变量配置及使用