环境变量的配置

在项目的根目录下，创建 .env.development文件[开发]和.env.production[生产]（可以有多个配置文件）在这两个文件中声明一个变量值。

VITE_NAME='生产环境' (.env.production 文件中写的) VITE_NAME='开发环境' (.env.development 文件中写的) 需要注意的是，我们需要以'VITE_'大写开头。然后重新启动服务{一定要重新启动服务} 然后我们可以通过 import.meta.env 获取我们定义的值

例如

//.env.development文件 其他文件定义的格式也一样 每个文件可以单独设置环境的配置
VITE_ENV = 'development'
VITE_OUTPUT_DIR = 'dev'
VITE_APP_BASE_URL='https://xxxx.com'

如果项目中有多个地方需要使用来判断当前的环境 就可以挂载到原型上面

//main.ts 文件中
import App from "./App.vue";
const app = createApp(App);
// 全局挂载
app.config.globalProperties.getEnv = import.meta.env;
app.mount("#app");

在项目中使用

<template>
  <div>
    <el-button type="primary" @click="test">测试</el-button>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const getEnv = proxy.getEnv;
const test = () => {
  console.log(getEnv, "当前环境*****");
};
</script>

<style scoped></style>

打印结果

配置打包和启动环境

  //package.json文件
  "scripts": {
    "dev": "vite --mode development",
    "test": "vite --mode test",
    "build": "vite build --mode production ",
    "preview": "vite preview",
  },

到此结束 简单记录一下 😋