vite项目配置环境变量

最新推荐文章于 2024-08-14 15:57:42 发布

键盘上行走的猿

最新推荐文章于 2024-08-14 15:57:42 发布

阅读量935

点赞数

分类专栏：前端开发文章标签：前端 html vue.js typescript javascript

本文链接：https://blog.csdn.net/qq_45142260/article/details/129089051

版权

14 篇文章 0 订阅

订阅专栏

创建了.env.dev和.env.prod文件分别用于开发和生产环境的配置，包括页面标题和API基础路径。在vite-env.d.ts中定义接口以支持类型检查，package.json中设置dev和build命令来切换模式。示例展示了如何在代码中访问这些环境变量。

摘要由CSDN通过智能技术生成

.env.dev --开发环境配置文件
.env.prod --生产环境配置文件

# .env.dev
# 页面标题
VITE_APP_TITLE = xxx

# 生产环境配置
VITE_ENV = 'development'

# 筋膜鸟管理系统/生产环境
VITE_APP_BASE_API = '/dev-api'

# .env.prod
# 页面标题
VITE_APP_TITLE = xxx

# 生产环境配置
VITE_ENV = 'production'

# 筋膜鸟管理系统/生产环境
VITE_APP_BASE_API = '/prod-api'

src文件夹下创建vite-env.d.ts

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string,
  readonly VITE_ENV: string,
  readonly VITE_APP_BASE_API: string
}

"scripts": {
    "dev": "vite --mode development",
    "build": "vite --mode production",
    ...
  },

console.log(import.meta.env.VITE_APP_BASE_API) // dev-api
console.log(import.meta.env.VITE_ENV) // development

关注

专栏目录