vite环境变量的配置

vite环境变量总共须配置三个文件,其中.env.development文件(npm run dev时自动启用该文件)和.env.production(npm run bulid时自动启用该文件)文件为必须。env.d.ts文件为非必须,该文件主要用作ts代码的智能提示使用。

新增三个文件目录结构:

vite环境变量的配置_第1张图片

.env.development文件:

# 只在开发模式中被载入
VITE_APP_BASE_API = '/api/admin/'
VITE_APP_VUE_API = '123'
VUE_API = '789'

.env.production文件:

# 只在生产模式中被载入
VITE_APP_BASE_API = 'https://www.baidu.com/'
VITE_APP_VUE_API = '456'
VUE_API = '101112'

env.d.ts文件:

// 环境变量变量声明
interface ImportMetaEnv {
  readonly VITE_APP_BASE_API: string
  readonly VITE_APP_VUE_API: string
  readonly VUE_API: string
}

注意:只有以 VITE_ 开头的变量才会被识别,并启用。

使用:

vite环境变量的配置_第2张图片

VUE_API无法找到:

vite环境变量的配置_第3张图片

新增环境配置

.env.staging文件中内容同上

vite环境变量的配置_第4张图片

package.json中配置:

vite环境变量的配置_第5张图片 

 

你可能感兴趣的:(前端,vue.js)