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项目提供适当的配置,从而使得我们的开发流程更加灵活和高效。

相关推荐
10年前端老司机8 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js