vue项目开发生产测试等环境变量配置

在 Vue.js 项目中，.env 文件通常用于存储环境变量，这些变量可以在项目的不同部分中使用。.env 文件分为几种类型，如 .env.development（开发环境）、.env.production（生产环境）和 .env.test（测试环境）等，分别用于存储不同环境下的变量。

.env.prod 文件一般用于存储生产环境的配置信息。在 Vue CLI 创建的项目中，你可以通过以下步骤实现 .env.prod：

1. 在项目根目录下创建一个名为 .env.prod 的文件。

2. 在 .env.prod 文件中添加你需要的环境变量，例如：

?

1 2	VUE_APP_TITLE=My Production App  VUE_APP_API_URL=https://api.production.com

注意，环境变量的名称必须以 VUE_APP_ 开头，这样它们才会被 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

3. 在你的 Vue.js 项目中，你可以通过 process.env 访问这些环境变量。例如，在 Vue 组件中，你可以这样使用：

?

1 2 3 4 5 6 7

export default {    name: 'MyComponent',    created() {      console.log(process.env.VUE_APP_TITLE);      console.log(process.env.VUE_APP_API_URL);    }  }

4. 在构建生产版本的项目时，Vue CLI 会自动读取 .env.prod 文件中的环境变量。你可以通过运行 vue-cli-service serve 命令启动开发服务器，此时会读取 .env.development 文件中的环境变量。而当你运行 vue-cli-service build 命令构建生产版本的项目时，会读取 .env.prod 文件中的环境变量。

5. 以上就能实现开发环境和正式环境了，但是.env.test（测试环境）或者我将.env.development改名了，又该怎么办呢？你可以使用 --mode 标志来显式地指定你想要使用的环境模式。这允许你自定义环境变量的加载行为。

   例如，如果你将 .env.development 更名为 .env.mydev，你可以通过以下命令来启动开发服务器并加载 .env.mydev 文件中的环境变量：

   ?

   1	vue-cli-service serve --mode mydev

   使用 --mode 标志告诉 Vue CLI 你想要使用一个自定义的环境模式 mydev。然后，你需要确保有一个名为 .env.mydev 的文件存在于项目的根目录中，并且它包含了所有你需要的环境变量。

   当你运行 vue-cli-service serve --mode mydev 时，Vue CLI 会查找 .env.mydev 文件并加载其中的环境变量。这些变量随后将用于你的开发服务器实例中。