vue cli 3显示package.json中的信息

TLDR

中的以下代码段 vue.config.js 文件将起作用,并允许您以 APPLICATION_VERSION :

module.exports = {
  configureWebpack: config => {
    return {
      plugins: [
        new webpack.DefinePlugin({
          'APPLICATION_VERSION': JSON.stringify(require('./package.json').version),
        })
      ]
    }
  },
}

提示:

甚至不要尝试向添加密钥 process.env 通过 webpack.definePlugin :它不会像你预期的那样工作。

为什么我以前的努力没有奏效?

最后,我通过 webpack.DefinePlugin . 我遇到的主要问题是,我找到的原始解决方案是使用 definePlugin 写信给某人 process.env.PACKAGE_JSON 变量。

这表明 定义插件 以某种方式允许将变量添加到 process 或 进程 但事实并非如此。每当我记录下来 进程 在控制台中,我找不到我要插入的变量 过程.env :所以我认为 定义插件 技术不起作用。

实际上,什么 网页包.defineplugin 要做的是在编译时检查字符串并将其更改为代码上的值。因此,如果您定义 ACME_VERSION 变量通过:

module.exports = {
  lintOnSave: true,

  configureWebpack: config => {
    return {
      plugins: [
        new webpack.DefinePlugin({
          'ACME_VERSION': 111,
        })
      ]
    }
  },
}

然后,在 main.js 你打印 console.log(ACME_VERSION) 你会得到 111 正确记录 .

然而,现在,这只是一个 一串 编译时更改。如果不是 阿克梅版 你试图定义 process.env.VUE_APP_ACME_VERSION …

当你登录 进程 这个 VUE_APP_ACME_VERSION 密钥不会出现在对象中。 然而 一个原始的 console.log('process.env.VUE_APP_ACME_VERSION') 将屈服 一百一十一 果不其然。

所以,基本上,原始链接和建议的解决方案在某种程度上是正确的。然而,没有什么真正被添加到 过程 对象。我在伐木 proccess.env 在最初的尝试中,我没有看到任何效果。

然而,现在,自从 过程 对象没有被修改,我强烈建议任何试图在编译时将变量加载到其Vue应用程序的人不要使用它。最多是误导。

构建Vue应用程序时, environment variables that don't begin with the VUE_APP_ prefix are filtered out . NODE_ENV 和 BASE_URL 环境变量是例外。

以上信息适用于在构建Vue应用程序之前设置环境变量的情况,而不是在这种情况下。

在构建期间设置环境变量的情况下,查看 Vue CLI 正在做。

这个 VUE CLI uses webpack.DefinePlugin 使用从调用返回的对象设置环境变量 resolveClientEnv .

解决方法 收益率

{
   'process.env': {}
}

这意味着在构建时配置环境变量时,需要找到一种与现有变量合并的方法。 您需要对两个数组执行深度合并,以便 process.env key是一个对象,包含解析客户机环境中的密钥和您的密钥。

chainWebpack 输入的默认导出 vue.config.js 只是完成这件事的方法之一。

为初始化 DefinePlugin 可以与要使用底层配置的新环境变量合并 webpack-chain 应用程序编程接口。下面是一个例子:

// vue.config.js

const merge = require('deepmerge');
const pkgVersion = require('./package.json').version;

const VERSION = {
   'process.env': {
     VERSION: JSON.stringify(pkgVersion)
   }
}

module.exports = {
  chainWebpack: config => 
    config
      .plugin('define')
      .tap(
          args => merge(args, [VERSION])
      )
}

你最初的尝试是好的,你只是错过了 JSON.stringify 部分:

const webpack = require('webpack');

module.exports = {    
  configureWebpack: config => {
    return {
      plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            VERSION: JSON.stringify(require('./package.json').version),
          }
        })
      ]
    }
  },
}

编辑:尽管 webpack docs 推荐 'process.env.VERSION' 方式(黄色面板):

new webpack.DefinePlugin({
  'process.env.VERSION': JSON.stringify(require('./package.json').version),
}),