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