创建文件

在项目目录想创建四个文件

/*目录结构*/
-OJS
---.env
---.env.dev
---.env.prod
---.env.test

注意文件名固定,不能更改

• .env 全局环境变量配置,不论在开发环境还是生产环境都能访问到该环境变量中的值当你指定了环境，它也会合并,并且优先级大于.env，没有指定环境时先找它

• .env.dev 开发环境变量配置, 当前为开发环境时,访问该文件中的环境变量

• .env.prod生产环境变量配置, 当前为生产环境时,访问该文件中的环境变量,build的时候回运行该环境的变量

• .env.test 测试环境变量配置, 当前为测试环境是, 访问该文件中的环境变量..

三个文件(dev,prod,test)依次配置各自的VITE_API_HOST 作为baseUrl,达到 与 不同的环境的接口打交道的目的

#.env
#全局配置

VITE_APP_NAME = 星辰
VITE_ENV = 全局

#.env.dev
#开发环境
VITE_MODE_NAME=development
#自己电脑 mock 测试环境
VITE_API_HOST=http://localhost:10010

#.env.prod
#生产环境 ip是服务端提供生成环境的接口的ip地址和端口号
VITE_MODE_NAME=production
VITE_API_HOST=http://177.72.96.231:8000

#.env.test
#后端联调测试环境 测试环境 ip是服务端提供测试环境的接口的ip地址和端口号
VITE_MODE_NAME=test
VITE_API_HOST=http://177.73.96.231:8000

配置package.json

"scripts": {
  "dev": "vite --mode dev",
  "test": "vite --mode test",
  "prod": "vite --mode prod",
  "build:dev": "vue-tsc --noEmit && vite build --mode dev",   // yarn run build:dev 打包时读取 .env 和 .env.dev文件中的配置
  "build:test": "vue-tsc --noEmit && vite build --mode test",  // yarn run build:test 打包时读取 .env 和 .env.test 文件中的配置    
  "build:pro": "vue-tsc --noEmit && vite build --mode pro", // yarn run build:pro 打包时读取 .env 和 .env.pro 文件中的配置

  "build": "vite build",
  "preview": "vite preview"
},

启动

npm run test //启动 测试环境
npm run dev // 启动 开发环境
npm run prod // 启动生产环境

测试

在main.js中写入

console.log(import.meta.env);

效果如下

我们同样也可以看到,我们全局环境变量.env中的属性

关于 process.env和import.meta.env

process.env是Node.js中的全局变量，用于访问进程中的环境变量。在前端开发中，我们通常使用Webpack等构建工具来打包应用程序，因此需要在构建过程中设置环境变量。在Webpack中，可以使用DefinePlugin插件将环境变量注入到应用程序中，然后在代码中通过process.env来访问这些变量。

例如，在Webpack中设置一个名为API_URL的环境变量，可以在代码中通过process.env.API_URL来访问它：

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify('https://api.example.com')
    })
  ]
}
 
// app.js
console.log(process.env.API_URL) // 'https://api.example.com'

import.meta.env是在ES模块中定义的全局变量，用于访问Vite构建的应用程序中的环境变量。在Vite中，可以在.env文件中定义环境变量，然后在Vue组件和JavaScript模块中通过import.meta.env来访问这些变量。

需要注意的是，process.env和import.meta.env的作用域不同，前者作用于整个Node.js进程，后者只作用于当前的JavaScript模块或Vue组件。因此，它们的用法和使用场景也有所不同。