vite+vue3环境变量的配置

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文章目录

一、vite

vite官方文档环境变量和模式

1. 环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由 base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

主要使用的 import.meta.env.MODE 有两种development开发模式、 production 生产模式

注意这个环境变量不能使用动态赋值 import.meta.env[key] 应为这些环境变量在打包的时候是会被硬编码的通过 JSON.stringify 注入浏览器的

2. `env` 文件

配置额外的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载但会被 git 忽略

# .env.development 开发环境
# .env.staging 预发布测试环境
# .env.production 生产环境

2.1 环境加载优先级

一份用于指定模式的文件例如 .env.production会比通用形式的优先级更高例如 .env。

另外Vite 执行时已经存在的环境变量有最高的优先级不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载而改动会在重启服务器后生效。

只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

2.2 TypeScript 的智能提示

默认情况下Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。

要想做到这一点你可以在 src 目录下创建一个 env.d.ts 文件接着按下面这样增加 ImportMetaEnv 的定义

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

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

3. 模式

默认情况下开发服务器 (dev 命令) 运行在 development (开发) 模式而 build 命令则运行在 production (生产) 模式。

二、vue

1. 开发环境

在这里插入图片描述

2. 生产环境

打包生成dist文件

npm run build

直接打开 dist 文件下的 index.html 不行会报跨域错误可以使用 http-server 本地启一个服务

cd dist

# 没安装http-server先全局安装
# 查看全局安装包
npm list -g --depth 0

# 安装http-server
npm install http-server -g

# 启动服务
http-server -p 9001

在这里插入图片描述

3. 在 `vite.config.ts` 使用环境变量

在 vite.config.ts 中node环境不能直接使用环境变量

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default ({ mode }: any) => {
  // mode: 区分生产环境还是开发环境
  // process.cwd(): 获取当前文件的目录跟地址
  // loadEnv(): 返回当前环境env文件中额外定义的变量
  console.log(loadEnv(mode, process.cwd())); // { VITE_APP_TITLE: '开发环境', VITE_HTTP: 'www.baidu.com' }
  return defineConfig({
    plugins: [
      vue(),
    ],
  })
}