VUE+Vite之环境文件配置及使用环境变量

在现代的前端开发中,我们经常需要根据不同的环境(如开发环境、生产环境和测试环境)来配置不同的参数。Vite,作为一个现代化的前端构建工具,提供了对环境文件和环境变量的原生支持,使得开发者能够轻松地管理和使用这些变量。

一、为什么要配置环境文件和环境变量?

在软件开发过程中,我们的应用程序需要在不同的环境中运行。例如,开发环境通常用于本地开发,生产环境用于部署到线上供用户使用,而测试环境则用于执行自动化测试。这些环境可能会有不同的配置需求,比如API的端点地址、服务的密钥等。通过配置环境文件和环境变量,我们可以确保在构建和运行应用程序时,能够根据当前的环境自动使用正确的配置。

二、环境文件存在哪?后缀名在哪决定?

1.环境文件一定要保存在项目的根目录下,这样Vite才能正确识别和加载它们。

2.环境文件的命名必须以.env为前缀,根据不同的环境,可以追加相应的后缀。例如,开发环境通常使用.env.development,生产环境使用.env.production,测试环境使用.env.test。

3.Vite会根据不同的命令行参数和模式来选择对应的环境文件。默认情况下,开发模式会加载.env.development,而构建生产版本时会加载.env.production。

4.在package.json的scripts字段中,我们可以通过"--mode"参数来指定Vite运行的模式。例如,在开发模式下,我们可以使用vite --mode development来指定加载.env.development文件。

我们可以通过在命令行中传递--mode参数来自定义Vite的运行模式,这样Vite会加载与指定模式相匹配的环境文件。例如,如果我们想要定义一个名为"staging"的新模式,我们可以在package.json的scripts字段中添加一个新的脚本,如下所示:

复制代码
"scripts": {
  "dev": "vite --mode development",
  "build": "vue-tsc && vite build",
  "preview": "vite preview",
  "stage": "vite --mode staging"
}

在这个例子中,我们添加了一个新的脚本"stage",它使用--mode staging参数。这将告诉Vite加载名为".env.staging"的环境文件。

接下来,我们需要在项目根目录下创建一个名为".env.staging"的文件,并在这个文件中定义所有适用于"staging"环境的变量。

三、环境变量怎么写?

1.环境变量必须以"VITE_"开头,这是Vite规定的命名规范,以区分普通的变量。不以VITE开头的环境变量不起作用。

2.环境变量的值后面不应该加上分号";",这会导致Vite无法正确解析变量。

正确的写法如下:

VITE_baseURL=127.0.0.1:8000

错误的写法如下(血泪教训啊!!!):

VITE_baseURL=127.0.0.1:8000;

四、环境变量怎么读出来?

1.在vite.config.ts中取得环境变量

在Vite的配置文件中,我们可以使用loadEnv函数来加载对应模式的环境变量。loadEnv函数接受两个参数,第一个参数是模式,第二个参数是项目根目录的路径。

复制代码
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default ({ command, mode }) => {
  const targetUrl: string = loadEnv(mode, process.cwd()).VITE_baseURL;
  return defineConfig({
    plugins: [vue()],
    server: {
      open: false,
      port: 3000,
      proxy: {
        "/api": {
          target: targetUrl,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  });
};

如果需要使用process对象,我们需要安装@types/node类型定义文件。安装方法如下:

npm install --save-dev @types/node

2.在组件中取得环境变量

在Vue组件中,我们可以通过import.meta.env对象来访问定义在环境文件中的变量。例如,要访问baseURL,我们可以使用import.meta.env.VITE_baseURL。

总结

通过配置和使用环境文件和环境变量,我们可以在不同的环境下为我们的Vite项目提供适当的配置,从而使得我们的开发流程更加灵活和高效。

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试