Kinght的小屋

Appearance

vite 的环境变量 ​

​ 在项目启动时，我们可以让项目以什么环境下启动，例如开发环境、生成环境下启动。在对应环境下可以配置不同的环境变量。在环境变量中，可以配置各种数据，以便在工程中访问这些数据。

配置 package.json 文件 ​

json
  "scripts": {
    "start:dev": "vite --mode development", // 开发模式
    "start:pro": "vite --mode production", // 生产模式
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "scripts": {
    "start:dev": "vite --mode development", // 开发模式
    "start:pro": "vite --mode production", // 生产模式
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

注意 development、production，这两个模式下一定要有对应环境变量文件

创建.env.development 和.env.production 环境变量文件，并定义环境变量

环境变量 ​

全局环境变量 ​

全局环境变量是指在任意模式下启动项目都可以访问的数据，只需要创建.env文件，.env文件会在任意模式下载入数据。

内置的环境变量 ​

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 上。

自定义环境变量 ​

自定义环境变量必须以** VITE_**开头。

自定义模式 ​

json
  "scripts": {
    "start:dev": "vite --mode development",
    "start:pro": "vite --mode production",
    "start:test":"vite --mode testok", // 自定义模式
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "scripts": {
    "start:dev": "vite --mode development",
    "start:pro": "vite --mode production",
    "start:test":"vite --mode testok", // 自定义模式
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

模式名称为 testok，则我们必须保证工程里面有.env.testok 文件即可。

参考 ​

  1. https://juejin.cn/post/7172012247852515335