基于vue-cli 打包时抽离项目相关配置文件详解

“基于vue-cli 打包时抽离项目相关配置文件”的攻略分为以下几个步骤：

1. 创建一个 .env.[mode] 文件

在根目录中创建一个名为 .env.[mode] 的文件，其中 [mode] 表示你的应用程序的模式，比如开发模式可以是 .env.development，生产模式可以是 .env.production。

在这个文件中，可以定义一些环境变量，比如 VUE_APP_API_BASE_URL=http://api.example.com。这些变量会在打包时自动加到应用的 process.env 中，可以在应用中直接使用。

1. 在项目根目录中新建相应的 .env.[mode].local 文件

这一步是可选的，如果你想在某些情况下修改某个配置变量，可以在对应的 .env.[mode].local 文件中修改。这个文件会覆盖相应的 .env.[mode] 文件中的变量，比如你可以在 .env.development.local 中修改 VUE_APP_API_BASE_URL 的值。

1. 使用不同的模式打包应用

在打包应用时，可以通过设置 NODE_ENV 环境变量来指定应用的模式，比如 NODE_ENV=production npm run build 表示在生产模式下打包应用。

在打包时，vue-cli 会自动加载 .env.[mode] 和 .env.[mode].local 中的环境变量，并将它们加入到应用程序的 process.env 中。

1. 分离配置文件

如果希望进一步抽离配置文件，可以使用 webpack 的 DefinePlugin 插件将 .env 文件中的变量加入到应用程序的全局变量中，比如将 VUE_APP_API_BASE_URL 加入到 window.__CONFIG__ 对象中。

在 vue.config.js 中，可以通过 configureWebpack 配置对象中的 plugins 属性来添加 DefinePlugin 插件。

示例一：

以下是一个 .env.local 文件的示例：

VUE_APP_API_BASE_URL=http://localhost:3000

这个文件中定义了一个名为 VUE_APP_API_BASE_URL 的环境变量，用于指定应用程序的 API 基本 URL。在 .env.local 文件中，这个 URL 指向本机的一个开发服务器。

示例二：

以下是一个 configureWebpack 配置对象的示例：

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

这个配置对象中使用了 webpack 的 DefinePlugin 插件，将所有的环境变量加入到了 window.__CONFIG__ 对象中。这样，在应用程序中就可以使用 window.__CONFIG__ 对象来访问环境变量。