Vue cli 3 显示来自 package.json 的信息

Question

在一个vue cli 3项目中，我想在网页中显示一个版本号。版本号位于 package.json 文件中。

我找到的唯一参考资料 is this link in the vue forum。

但是，我无法使用建议的解决方案。

我尝试过的东西

在链接资源中使用webpack.definePlugin：

vue.config.js

const webpack = require('webpack');

module.exports = {
  lintOnSave: true,

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

然后在 main.ts 中我读到 process.env，但它不包含 VERSION（我尝试了几个变体，比如在链接页面中生成一个 PACKAGE_JSON 字段，并且生成像 'foo' 这样的普通值而不是从 package-json 读取）。它从来没有用过，就像代码被忽略了一样。我想 process.env 稍后会被 vue webpack 的东西重新定义。

main.ts 中的 process 日志包含 process 通常在 vue-cli 项目中包含的所有内容，例如模式和 VUE_APP .env 个文件中定义的变量。

尝试在配置 webpack 函数上写入 process，

喜欢：

 configureWebpack: config => {
   process.VERSION = require('./package.json').version
 },

（老实说，我对此并没有太大的希望，但不得不尝试）。

尝试了链接页面中提出的其他解决方案，

喜欢：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap( ([options = {}]) => {
      return [{
        ...options, // these are the env variables from your .env file, if any arr defined
        VERSION: JSON.stringify(require('./package.json').version)
      }]
    })
  }
}

但这也无声地失败了。

使用@Oluwafemi 建议的config.plugin('define') 语法，

喜欢：

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

其中 VERSION 是定义为的局部变量：

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

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

但这也不起作用。

我每次都重新启动整个项目，所以这不是进程内容不显示的原因。

我的vue-cli版本是3.0.1.

Answer 1

构建 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 to set environment variables using the object returned from the call to resolveClientEnv.

resolveClientEnv returns

{
   'process.env': {}
}

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

chainWebpack vue.config.js 的默认导出中的键只是完成此操作的方法之一。

传递给初始化 DefinePlugin 的参数可以与您喜欢使用底层 webpack-chain API 配置的新环境变量合并。这是一个例子：

// 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])
      )
}

Answer 2

您的初始尝试没有问题，您只是缺少 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),
}),

Answer 3

TLDR

vue.config.js 文件中的以下代码片段可以解决问题，并允许您访问您的应用程序版本 APPLICATION_VERSION:

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

提示：

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

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

最后，我通过webpack.DefinePlugin解决了这个问题。我遇到的主要问题是我找到的原始解决方案是使用 definePlugin 写入 process.env.PACKAGE_JSON 变量。

这表明 definePlugin 以某种方式允许向 process 或 process.env 添加变量，但事实并非如此。每当我在控制台中登录 process.env 时，我都没有找到我试图推入 process.env 的变量：所以我虽然 definePlugin 技术没有工作。

实际上，webpack.definePlugin 所做的是在编译时检查字符串并在您的代码中将它们更改为它的值。因此，如果您通过以下方式定义 ACME_VERSION 变量：

module.exports = {
  lintOnSave: true,

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

然后，在 main.js 中打印 console.log(ACME_VERSION)，您将 111 正确记录 。

然而，现在这只是编译时的 string 更改。如果您尝试定义 process.env.VUE_APP_ACME_VERSION...

而不是 ACME_VERSION

当您登录 process.env 时，VUE_APP_ACME_VERSION 键不会出现在对象中。但是，原始 console.log('process.env.VUE_APP_ACME_VERSION') 将按预期产生 111。

所以，基本上，原始 link 和建议的解决方案在某种程度上是正确的。但是，实际上并没有向 process 对象添加任何内容。我在最初的尝试中记录了 proccess.env，所以我没有看到任何工作。

但是现在，由于 process 对象没有被修改，我强烈建议任何试图在编译时将变量加载到他们的 vue 应用程序的人不要使用它。充其量是误导。

Answer 4

您只需导入 package.json 文件并使用其变量即可。

import { version } from "../../package.json";

console.log(version)

如果你使用的是Webpack，你可以通过以下方式注入变量：

// webpack.config.js
  plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(require("package.json").version)
    })
  ]

// any-module.js
console.log("Version: " + VERSION);

https://github.com/webpack/webpack/issues/237

Answer 5

官方解决方案往往更可靠Modes and Environment Variables | Vue CLI

提示

您可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 为前缀。这对版本信息很有用

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

Answer 6

VueJS 官方论坛的 answer 是这样的：

chainWebpack: config => {
  config
    .plugin('define')
      .tap(args => {
        let v = JSON.stringify(require('./package.json').version)
        args[0]['process.env']['VERSION'] = v
        return args
      })
}

描述

将此行添加到您的 vue.config.js 文件

module.exports = {
    ...
    chainWebpack: config => {
        config
            .plugin('define')
            .tap(args => {
                let v = JSON.stringify(require('./package.json').version)
                args[0]['process.env']['VERSION'] = v
                return args
            })
    }
};

然后你可以像这样在你的 vue 文件中使用它：

version: function () {
            return process.env.VERSION
        }

Answer 7

我加了 2 美分，因为我发现了一个 更短的方式，而且显然是正确的方式 (https://docs.npmjs.com/misc/scripts#packagejson-vars)

在导出之前将其添加到您的 vue.config.file 中，而不是在内部：

process.env.VUE_APP_VERSION = process.env.npm_package_version

瞧瞧！

然后您可以从具有 process.env.VUE_APP_VERSION

的组件中使用它

Answer 8

我尝试了接受的答案，但有错误。但是，在 vue 文档中，我能够找到与 @antoni 的答案相似（但不完全）的答案。

简而言之，vue.config.js中有以下内容：

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

Docs 2020-10-27:

You can access env variables in your application code:

process.env.VUE_APP_NOT_SECRET_CODE = require('./package.json').version

During build, process.env.VUE_APP_NOT_SECRET_CODE will be replaced by the corresponding value. In the case of VUE_APP_NOT_SECRET_CODE=some_value, it will be replaced by "some_value".

In addition to VUE_APP_* variables, there are also two special variables that will always be available in your app code:

NODE_ENV - this will be one of "development", "production" or "test" depending on the mode the app is running in.

BASE_URL - this corresponds to the publicPath option in vue.config.js and is the base path your app is deployed at.

Answer 9

单线替代：

//script tag
let packageJsonInfo = require("../../package.json");

//Then you can for example, get the version no
packageJsonInfo.version

Vue cli 3 显示来自 package.json 的信息

Vue cli 3 display info from the package.json

javascript

webpack

vue.js

vuejs2

vue-cli-3

我尝试过的东西

在链接资源中使用`webpack.definePlugin`：

尝试在配置 webpack 函数上写入 `process`，

尝试了链接页面中提出的其他解决方案，

使用@Oluwafemi 建议的`config.plugin('define')` 语法，

TLDR

提示：

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

Vue cli 3 显示来自 package.json 的信息

Vue cli 3 display info from the package.json

javascript

webpack

vue.js

vuejs2

vue-cli-3

我尝试过的东西

在链接资源中使用webpack.definePlugin：

尝试在配置 webpack 函数上写入 process，

尝试了链接页面中提出的其他解决方案，

使用@Oluwafemi 建议的config.plugin('define') 语法，

TLDR

提示：

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

在链接资源中使用`webpack.definePlugin`：

尝试在配置 webpack 函数上写入 `process`，

使用@Oluwafemi 建议的`config.plugin('define')` 语法，