vue3+vite-配置环境变量env

一、环境变量的四种方式

在官方文档中，CLI3.0有四种方式来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

二、模式

默认情况下，一个 Vue CLI 项目有三个模式:

development  #模式用于 vue-cli-service serve
production   #模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test         #模式用于 vue-cli-service test:unit	

我们可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量，意思就是：在某些文件只会在某个模式下被载入，比如：

.env.development 的文件就只会在 development 模式下被载入。

当然，我们是可以通过参数来修改默认模式的。通过–mode 后面跟上指定模式名来修改，–mode development。比如我们想在build构建的时候，使用开发环境的变量。

"build": "vue-cli-service build --mode development",
// 或者加入自定义的新命令
"dev-build": "vue-cli-service build --mode development",

• 首先，我们在根目录下新建.env、.env.development、.env.production，它们的代码分别为

// env
VITE_APP_URL=http://www.baidu.com
 
// env.production
VITE_NODE_ENV=production
VITE_APP_URL=http://www.jingdong.com
 
 
// env.development
VITE_NODE_ENV=development
VITE_APP_URL=http://dev.taobao.com

需要注意的是，我们需要以'VITE_'大写开头。然后重新启动服务{一定要重新启动服务}

写法2：若环境变量和其它变量不想以VITE_开头 如：以 APP_ 开头

则可以在 vite.config.ts 文件中添加 envPrefix: “APP_”,

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  
  // 自定义模式变量开头, 如：以 APP_ 开头
  // envPrefix: 'APP_',
  
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

然后我们可以通过 import.meta.env 获取我们定义的值。 有的小伙伴可能会说，如果大量的地方需要获取环境 import.meta.env。 我们可以进行优化，我们可以将这个方法挂载到vue的原型上

• 将方法挂载到vue3.0的原型上

//在main.ts文件中
let app = createApp(App)
// 将获取环境的方法挂载到vue的原型上，方便后面的使用
app.config.globalProperties.getEnv =import.meta.env
app.use(router).use(store).use(Button).use(VanImage).mount('#app')

• 如何使用原型中的方法

//引入
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance();
console.log('输出的值',proxy.getEnv )
//这样就可以获取环境了。

• 配置tsconfig.json文件

在tsconfig.json中添加 “types”: [ “vite/client” ] ，用来提供import.meta.env 上 Vite 注入的环境变量的类型定义

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
      
  "types": [ "vite/client" ]  // 提供import.meta.env 上 Vite 注入的环境变量的类型定义
      
  },
  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

• 配置env.d.ts文件

在src目录下env.d.ts中添加以下代码，可以在在代码中获取用户自定义环境变量的 TypeScript 智能提示

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_NODE_ENV: string;//定义提示信息 数据是只读的无法被修改
  //多个变量定义多个...
}

// 因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，这一段是告诉 ts，vue 文件是这种类型的。
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

• 使用环境变量

使用import.meta.env.VITE_NODE_ENV获取环境变量

console.log(import.meta.env.VITE_NODE_ENV) 
// 可以打印import.meta.env 查看里面的具体数据
console.log(import.meta.env) 

• 在package.json中配置模式

"scripts": {
    "serve": "vite",   // 未指定模式的默认取 .env 文件中的配置
    "dev": "vite --mode dev",   // 取 .env.dev文件中的配置
    "pro": "vite --mode pro",   // 取 .env.pro文件中的配置
    "build": "vue-tsc --noEmit && vite build",    // 未指定模式的默认取 .env 文件中的配置
  },

• 扩展

例如在使用axios请求后台接口时可配置基本路径为配置路径。

baseURL: import.meta.env.APP_BASE_API,