vue项目开发生产测试等环境变量配置
在 Vue.js 项目中，.env 文件通常用于存储环境变量，这些变量可以在项目的不同部分中使用。.env 文件分为几种类型，如 .env.development（开发环境）、.env.production（生产环境）和 .env.test（测试环境）等，分别用于存储不同环境下的变量。
.env.prod 文件一般用于存储生产环境的配置信息。在 Vue CLI 创建的项目中，你可以通过以下步骤实现 .env.prod：
-
在项目根目录下创建一个名为
.env.prod的文件。 -
在
.env.prod文件中添加你需要的环境变量，例如：
VUE_APP_TITLE=My Production App VUE_APP_API_URL=https://api.production.com
注意，环境变量的名称必须以
VUE_APP_ 开头，这样它们才会被 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。-
在你的 Vue.js 项目中，你可以通过
process.env访问这些环境变量。例如，在 Vue 组件中，你可以这样使用：
export default {
name: 'MyComponent',
created() {
console.log(process.env.VUE_APP_TITLE);
console.log(process.env.VUE_APP_API_URL);
}
}
- 在构建生产版本的项目时，Vue CLI 会自动读取
.env.prod文件中的环境变量。你可以通过运行vue-cli-service serve命令启动开发服务器，此时会读取.env.development文件中的环境变量。而当你运行vue-cli-service build命令构建生产版本的项目时，会读取.env.prod文件中的环境变量。 -
以上就能实现开发环境和正式环境了，但是
.env.test（测试环境）或者我将.env.development改名了，又该怎么办呢？你可以使用--mode标志来显式地指定你想要使用的环境模式。这允许你自定义环境变量的加载行为。例如，如果你将
.env.development更名为.env.mydev，你可以通过以下命令来启动开发服务器并加载.env.mydev文件中的环境变量：vue-cli-service serve --mode mydev
使用
--mode标志告诉 Vue CLI 你想要使用一个自定义的环境模式mydev。然后，你需要确保有一个名为.env.mydev的文件存在于项目的根目录中，并且它包含了所有你需要的环境变量。当你运行
vue-cli-service serve --mode mydev时，Vue CLI 会查找.env.mydev文件并加载其中的环境变量。这些变量随后将用于你的开发服务器实例中。
