uniapp + vite + .env

像我这样的菜鸡就得多练多记

主要是解决vite项目中.env配置在vite.config.js中读取的问题

• 项目结构

项目根目录下面（与src同级）新建.env.development，.env.production两个文件，分别配置测试环境和正式环境。

my_project/
  src/...
  .env.development
  .env.production
  vite.config.js

注意VITE_做前缀

// .env.development

VITE_FLAG=env.dev

// .env.production

VITE_FLAG=env.dis

• 读取配置的方法

vite.config.js中读取配置。此时import.meta还没有值，所以直接用loadEnv读取

// vite.config.js

import { defineConfig, loadEnv } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/

export default defineConfig((config)=> {
  const env = loadEnv(config.mode, process.cwd(), '');
  console.log('.env =', env.VITE_FLAG)
  return {
    plugins: [
      uni(),
    ],
  }
})

项目页面中读取配置。此时可以用import.meta.env.VITE_*来读取对应配置项

const flag = import.meta.env.VITE_FLAG
= env.dev

const dev = import.meta.env.DEV
= true

console.log(import.meta.env)
= {
  BASE_URL: "/"
  DEV: true
  MODE: "development"
  PROD: false
  SSR: false
  VITE_CJS_IGNORE_WARNING: "true"
  VITE_FLAG: "env.dev"
  VITE_ROOT_DIR: "/Users/xxx/xxx/my_project"
  VITE_USER_NODE_ENV: "development"
}

更进一步

如果添加了.env.development.local文件

// .env.development.local

VITE_FLAG=env.local

那么配置项VITE_FLAG将会读取.local中的值

且需要注意到.gitignore文件中会忽略这个.local文件

// .gitignore

*.local

那么这个.local文件就很适合做本地开发配置。通常情况，可以不搞这么复杂，直接用两个就够了：
.env.development 和 .env.production

-- EOF --