vue3+vite配置环境变量

1、创建环境变量文件:首先在vue3项目根目录创建.env.development 和 .env.prodution两个文件,分别为开发和生产环境(必须.env.开头,需要额外环境,配置自定义的文件名称即可)
在这里插入图片描述

2、在环境变量文件分别写对应环境变量,注意变量必须要VITE_开头
在这里插入图片描述
在这里插入图片描述

3、开发环境配置和访问环境变量
3.1 访问环境变量前,需要在package.json 的dev中配置mode(生产环境不需要配置,生产打包默认是生产模式),如下:
在这里插入图片描述

3.2 在.vue页面或者入口文件main.ts访问环境变量,使用import.meta.env
在这里插入图片描述
启动本地环境,访问对应页面时,会打印以下信息,包含自定义的环境变量
在这里插入图片描述
3.3 在vite.config.ts中访问环境变量:使用vite的loadEnv插件,需要将vite配置包裹在一个函数中,使用结构将当前mode模式拿到,如下所示:
在这里插入图片描述
4、在生产环境访问环境变量
4.1 打包项目,执行npm run build,生成了dist文件夹;
4.2 需要全局安装插件,npm install http-server -g,在dist文件夹打开终端,输入http-server -p 9091,即可启动一个服务查看打包后的项目,如下图所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关推荐

  1. vue3 vue+vite+ts 环境变量配置

    2024-03-25 21:12:07       27 阅读
  2. Vue3.0+vite vite.config.ts配置与env

    2024-03-25 21:12:07       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-25 21:12:07       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-25 21:12:07       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-25 21:12:07       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-25 21:12:07       18 阅读

热门阅读

  1. C#使用ASP.NET Core Razor Pages构建网站(二)

    2024-03-25 21:12:07       20 阅读
  2. c++小游戏《荒岛求生》

    2024-03-25 21:12:07       21 阅读
  3. typeScript3(数组类型)

    2024-03-25 21:12:07       18 阅读
  4. 【58. 最后一个单词的长度】

    2024-03-25 21:12:07       21 阅读
  5. 面对数据集不平衡的分类任务怎么办?

    2024-03-25 21:12:07       16 阅读
  6. 《c++》继承同名静态成员处理方式

    2024-03-25 21:12:07       19 阅读
  7. 【Leetcode】代码随想录Day15|二叉树2.0

    2024-03-25 21:12:07       18 阅读
  8. 毕业论文的问题猜想及答案整理

    2024-03-25 21:12:07       18 阅读
  9. Python学习笔记01

    2024-03-25 21:12:07       18 阅读
  10. 碎碎念-记一下LSPatch的原理

    2024-03-25 21:12:07       17 阅读