vue2 vue3项目怎么使用 .env 文件配置环境变量

vue2

首先，你需要在项目根目录下创建 .env 文件，这个文件通常包含一些环境变量。例如：

VITE_API_URL= https://api.example.com

VITE_APP_NAME= MyAwesomeApp

VUE_APP_APP_NAME=App

使用

 console.log(process.env.VUE_APP_APP_NAME); // 输出 App

 注意：

VUE_APP_ 开头的环境变量 Vue CLI 会将他们注入到你的Vue代码中，反之则需要下载一个插件配合使用

npm install dotenv --save-dev

通过webpack配置 注入到环境变量中

const path = require('path');

const webpack = require('webpack');

const dotenv = require('dotenv');

// 通过 dotenv 加载 .env 文件

dotenv.config();



module.exports = {

entry: './src/index.js', // 入口文件

output: { filename: 'bundle.js', // 输出文件

path: path.resolve(__dirname, 'dist') },

plugins: [

// 使用 DefinePlugin 插件注入环境变量

new webpack.DefinePlugin({

      'process.env': JSON.stringify({

                    VITE_API_URL: process.env.VITE_API_URL,

                    VITE_APP_NAME: process.env.VITE_APP_NAME

                    })

          })

    ]

};

使用

  console.log(process.env.VITE_APP_NAME); // 输出 MyAwesomeApp

vue3 

在项目的根目录下创建 .env 文件，它将用于存放默认的环境变量。你可以根据需要创建多个 .env 文件来配置不同的环境。

开发环境 .env.development

VITE_API_URL=https://dev.api.example.com
VITE_APP_TITLE=Vue 3 App (Development)

 生产环境 .env.production

 VITE_API_URL=https://prod.api.example.com
 VITE_APP_TITLE=Vue 3 App (Production)

Vite 会根据当前的构建模式（开发模式或生产模式）加载相应的 .env 文件。

Vite 会自动将以 VITE_ 为前缀的环境变量注入到应用中。你可以在 Vue 组件中通过 import.meta.env 来访问这些环境变量。

const appTitle = ref(import.meta.env.VITE_APP_TITLE)

const apiUrl = ref(import.meta.env.VITE_API_URL)