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

“基于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__ 对象来访问环境变量。

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

基础教程推荐