VUE2 环境变量文件

1. 创建环境变量文件

在 Vue 项目根目录下，创建一个名为 .env.test 的文件（根据需要使用你选择的环境名）。

# .env.test
VUE_APP_API_URL=http://test.api.example.com
VUE_APP_FEATURE_FLAG=true

在这个文件中，你可以定义以 VUE_APP_ 开头的环境变量，Vue CLI 会自动加载它们。

2. 修改 package.json

在 package.json 中添加一个新的脚本来运行开发服务器，可以使用 cross-env 来设置环境变量。首先，确保安装了 cross-env：

npm install cross-env --save-dev

然后，在 package.json 中添加脚本：

{
  "scripts": {
    "test-dev": "cross-env NODE_ENV=development vue-cli-service serve --mode test"
  }
}

　

3. 使用环境变量

在你的 Vue 组件或 JavaScript 文件中，可以通过 process.env 来访问这些环境变量。例如：

<template>
  <div>
    <h1>API URL: {{ apiUrl }}</h1>
    <p>Feature Flag: {{ featureFlag }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL,
      featureFlag: process.env.VUE_APP_FEATURE_FLAG === 'true'
    };
  }
};
</script>

4. 运行开发服务器

现在，你可以通过以下命令来启动开发服务器：

npm run test-dev