1. 环境变量
Vue CLI 允许你在项目中使用环境变量。这些变量的前缀是 VUE_APP_，并且会在构建时被注入到代码中。你可以在代码中通过 process.env.VUE_APP_XXX 来访问这些环境变量。
例如，假设你在 .env 文件中定义了一个环境变量：
VUE_APP_API_KEY=your_api_key
然后，在你的代码中可以这样使用：
const apiKey = process.env.VUE_APP_API_KEY;
2. 模式（Mode）
Vue CLI 提供了三个默认的模式：development、production 和 test。每个模式都有相应的默认配置，而且在构建时会自动选择。你可以通过 NODE_ENV 环境变量来手动设置当前的模式。例如，在 package.json 中的 scripts 中可以这样设置：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service test",
"build:prod": "NODE_ENV=production vue-cli-service build"
}
在代码中，你可以通过 process.env.NODE_ENV 来获取当前的模式，然后根据模式进行不同的处理：
if (process.env.NODE_ENV === 'production') {
// 在生产模式下的特殊处理
}
3. 自定义模式
除了默认的三个模式外，你也可以在 vue.config.js 中通过 configureWebpack 来自定义模式。例如：
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 在生产模式下的自定义配置
} else {
// 在其他模式下的自定义配置
}
},
};
4. 环境文件
Vue CLI 支持使用不同的环境文件来为不同的模式提供环境变量。默认情况下，Vue CLI 会加载 .env 文件，而且在 .env 文件的变量会被注入到所有模式中。你还可以创建 .env.production、.env.development 等文件，这些文件中的变量只会在对应的模式中生效。
总体而言，Vue CLI 的环境变量和模式功能为你提供了一种方便的方式，以便在不同的开发和生产环境中配置你的应用程序。
转载请注明出处：http://www.zyzy.cn/article/detail/4832/Vue