Vue CLI多环境配置教程：一步一步轻松入门

本文详细介绍了如何使用Vue CLI进行多环境配置教程，包括创建和使用.env文件、配置不同环境下的构建设置以及如何在项目中引用和条件编译环境变量。文章还提供了测试多环境配置的方法和解决常见问题的建议。

Vue CLI 是 Vue.js 官方提供的脚手架工具，它基于 webpack 构建，提供了一套预设的构建设置，使得开发 Vue.js 项目变得更加简单和高效。Vue CLI 最新版本为 Vue CLI 5，对应的 Vue 版本为 Vue 3.x，同时也支持 Vue 2.x 项目。

Vue CLI 主要功能包括：

• 快速搭建 Vue.js 项目
• 提供多种预设的构建选项
• 自动生成项目目录结构
• 自动配置构建和开发环境
• 支持热重载，方便调试
• 自动处理打包优化和代码分割
• 支持单元测试和端到端测试
• 支持多环境配置，实现开发、测试和生产环境的切换
• 提供插件系统，允许扩展和定制化
• 通过命令行工具进行项目管理

环境变量在开发过程中扮演着十分重要的角色。它们可以用于配置应用程序的不同环境（如开发环境、测试环境和生产环境），控制应用程序的行为。例如，开发环境下可能使用模拟的API，而生产环境下则使用真实的API。

Vue CLI 支持使用 .env 文件来设置环境变量。在项目根目录下创建不同环境的 .env 文件，如 .env.development 和 .env.production。这些文件中的变量将会被自动加载到项目中，并且可以在代码中通过 process.env 访问。

例如，创建 .env.development 文件：

VUE_APP_API_URL=https://api.development.example.com
VUE_APP_DEBUG=true

创建 .env.production 文件：

VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

在 .env 文件中，所有的环境变量都必须以 VUE_APP_ 开头，以确保它们不会与 webpack 定义的环境变量冲突。这样，你可以在不同的环境中设置不同的变量值。

在代码中可以通过 process.env 访问这些变量，例如：

console.log(process.env.VUE_APP_API_URL);

在项目中，你需要为不同的构建环境创建配置文件。这些配置文件通常放在 vue.config.js 中，或者直接通过命令行工具配置。例如，你可以创建 vue.config.js 文件，并根据不同的环境进行配置：

module.exports = {
  // 配置开发环境
  devServer: {
    publicPath: process.env.BASE_URL,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  // 配置生产环境
  configureWebpack: {
    externals: {
      // 一些全局变量或者CDN引入的库
      moment: 'moment',
      lodash: '_'
    }
  },
  // 根据环境变量来切换配置
  pwa: {
    manifest: {
      name: 'Vue PWA',
      short_name: 'PWA',
      lang: 'en'
    }
  },
  // 根据环境变量动态生成路径别名
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('assets', 'src/assets');
  }
};

你也可以通过 vue-cli-service 命令行工具来配置构建环境。例如，创建 .env 和 .env.production 文件，然后使用 vue-cli-service serve 和 vue-cli-service build 命令来启动开发服务器和构建生产环境：

# 启动开发服务器
vue-cli-service serve

# 构建生产环境
vue-cli-service build

在 .env 文件中添加以下内容：

VUE_APP_API_URL=https://api.development.example.com
VUE_APP_DEBUG=true

在 .env.production 文件中添加以下内容：

VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

Vue CLI 实际上基于 webpack 构建，因此你可以通过修改 vue.config.js 文件来自定义 webpack 配置。例如，你可以修改 vue.config.js 文件，添加自定义的 webpack 配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader'],
          include: path.resolve(__dirname, 'src/css')
        }
      ]
    }
  },
  // 配置环境别名
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改其他选项
        options.sassLoader = {
          implementation: require('dart-sass')
        }
        return options
      })
      .end()
  }
};

在项目中引用环境变量，可以通过 process.env 访问。例如，可以在脚本中使用环境变量：

export default {
  mounted() {
    console.log(process.env.VUE_APP_API_URL);
  }
}

也可以在模板中使用：

<div>{{ process.env.VUE_APP_API_URL }}</div>

你可以在构建配置文件中使用环境变量进行条件编译。例如，可以在 vue.config.js 文件中根据环境变量选择不同的配置：

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'process.env.VUE_APP_API_URL': JSON.stringify(process.env.VUE_APP_API_URL)
      })
    ]
  }
};

然后在代码中根据 process.env.NODE_ENV 的值进行条件编译：

export default {
  mounted() {
    if (process.env.NODE_ENV === 'development') {
      console.log('Development environment');
    } else {
      console.log('Production environment');
    }
  }
}

测试开发环境通常可以通过启动开发服务器来进行，例如：

vue-cli-service serve

此时，Vue CLI 会自动加载 .env.development 文件中的环境变量，并应用相应的配置。你可以在浏览器中访问项目，检查环境变量是否正确加载。

测试生产环境可以通过构建生产环境来实现，例如：

vue-cli-service build

此时，Vue CLI 会自动加载 .env.production 文件中的环境变量，并应用相应的配置。构建完成后，可以将构建输出的文件部署到服务器上，然后访问部署后的应用，检查环境变量是否正确加载。

如果发现环境变量未被正确加载，可以检查以下几点：

• 确认 .env 文件是否正确命名，并且放在项目根目录。
• 确认文件是否包含 VUE_APP_ 前缀。
• 确认 vue.config.js 文件是否正确配置，并且没有覆盖环境变量。
• 确认 vue-cli-service 命令是否正确使用。

例如，如果 .env 文件名是 .env.production，请使用 vue-cli-service build 命令。

不同环境下的构建差异通常表现为资源配置、库的引入、环境变量的设置等。例如，在开发环境下，你可能使用内存缓存，而在生产环境下，则使用持久化的缓存。

可以在 vue.config.js 文件中根据环境变量配置不同的构建选项：

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'process.env.VUE_APP_API_URL': JSON.stringify(process.env.VUE_APP_API_URL)
      })
    ]
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        if (process.env.NODE_ENV === 'production') {
          options.extractCSS = true;
        } else {
          options.extractCSS = false;
        }
        return options
      })
      .end()
  }
};

跨环境依赖通常是由于第三方库在不同环境中有不同的配置需求。例如，某些库在开发环境下依赖于模拟的数据，而在生产环境下则依赖于真实的数据。为了解决这个问题，可以在 vue.config.js 文件中动态配置这些库的依赖。

例如，使用 vue-cli-plugin-axios 插件来处理跨环境的 API 请求：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'process.env.VUE_APP_API_URL': JSON.stringify(process.env.VUE_APP_API_URL)
      })
    ]
  },
  chainWebpack: config => {
    config.plugin('provide').use(ProvidePlugin, [
      {
        axios: 'axios'
      }
    ]);
  }
};

然后在代码中根据环境变量动态配置 API 请求：

import axios from 'axios';

export default {
  mounted() {
    axios.get(process.env.VUE_APP_API_URL + '/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

以上是使用 Vue CLI 进行多环境配置的完整教程。希望这些内容对你有所帮助。如果您想进一步学习 Vue CLI 的更多功能，建议参考 Vue CLI 的官方文档，并在慕课网等地进行深入学习。