前提： 从文件中加载环境变量， 通过不同的npm 打包命令来实现设置不同的环境变量的方式。我们通过dotenv-cli 来实现， 本文以vue3为例。
1. 安装
npm install dotenv-cli -s
2. 在项目根目录新建 .env开头的文件， 例如（.env, .env.production, .env.test 等）
我新建的是.env.production
# dotenv-cli 配置环境变量， .env开头的文件存放在根目录，同时变量的前缀为 VUE_APP_ 例如： VUE_APP_XXX; 同时在package.json 中添加dotenv -e .env.production即可
VUE_APP_TEXT = static
VUE_APP_TEST = static
注意： 变量名的前缀为 VUE_APP_开头， 负责无法识别。
3. 通过在package.json 的script中添加命令来运行
"scripts": {
"serve": "vue-cli-service serve",
"serve-test": "dotenv -e .env.production vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
注意： dotenv -e 文件名 来运行， 后面加原本需要运行的命令即可。
然后就可以在项目中通过 process.env 来获取到所有的环境变量了。
在python项目中，敏感信息（如数据库密码）比较推荐使用 `.env`文件来单独管理，且不纳入git管理中。而目前比较流行的解析.env则是python-dotenv。
flask官方推荐使用python-dotenv包来管理特殊的配置。
dotenv-cli是什么
什么是dotenv-cli，A global executable to run applications with the ENV variables loaded by dotenv
dotenv-cli官网：官网
dotenv-cli源码仓库：源码仓库
dotenv-cli下载地址：点此下载点此下载2
dot...
本文主要是使用webpack5+vue3+vw适配+axios+vue-router+vuex+vant搭建一个基础的h5项目结构。其中每一节都是独立的配置，想要webpack搭配其他的也可以参考下。至于项目的代码，放在本文最后面，不想看的可以直接下载使用。
为了自己后续搭建h5项目能有个干净的项目框架直接使用，而不是每次都得重新搭建。每一个步骤都是我实践过的，其中存在的一些注意点和原理，我也会简单提及，算是学习实践的一篇笔记吧。
二，初始化项目
第一步：初始化package.json
npm i
npm i cross-env -D
安装 dotenv 来加载环境变量文件。dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中
npm i dotenv -D
创建环境变量文件
暂时我添加 dev 环境与 test 环境
touch .env.dev .env.test
修改 .env.dev 文件(代理
模块介绍：
Reads the key,value pair from .env file and adds them to environment variable.
Do one thing, do it well!
pypi:
https://pypi.org/project/python-dotenv/
github:
https://github.com/theskumar/python...
文章目录什么是dotenvdotenv 安装如何使用dotenv
什么是dotenv
Node.js中的dotenv库的使用，由于项目不同需求，需要配置不同环境变量，按需加载不同的环境变量文件，使用dotenv，可以完美解决这一问题。
dotenv 安装
npm install dotenv
如何使用dotenv
使用dotenv，只需要将程序的环境变量配置写在.env文件中。
.env file
PROJECT_ID=4a82ead5c4xxxxxxxxxxxxxxx
然后，在Node.js程序启动时
1. 下载并安装 Node.js，因为要使用 Vue.js 需要 Node.js 的支持。
2. 安装 Vue.js 脚手架，使用命令行输入：`npm install -g @vue/cli`。
3. 创建一个 Vue 项目，使用命令行输入：`vue create my-project`。
4. 进入到项目目录，使用命令行输入：`cd my-project`。
5. 安装 Element-Plus，使用命令行输入：`npm install element-plus --save`。
6. 在 main.js 中引入 Element-Plus，并注册为全局组件，例如：
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
Vue.use(ElementPlus)
7. 在项目中创建并编写组件，使用 Element-Plus 的组件进行布局和开发。
8. 最后使用命令行输入：`npm run serve` 运行项目。
希望这些步骤能帮助你使用 Element-Plus Vue 构建中后台程序。
