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

Question

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

我找到的对此的唯一参考是 vue 论坛中的这个链接。

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

我尝试过的事情

1. 使用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.tsI read process.env，但它不包含 VERSION （我尝试了几个变体，比如在链接页面中生成一个 PACKAGE_JSON 字段，并生成像 'foo' 这样的普通值而不是从 中读取package-json）。它从未奏效，就像代码被忽略了一样。我猜process.envvue webpack 的东西稍后会重新定义它。

该process日志中main.ts含有，但是，所有的东西，process通常包含在VUE-CLI项目，如模式和定义的变量VUE_APP.env文件。

2. 尝试process在配置 webpack 功能上写入正确，

喜欢：

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

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

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

喜欢：

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

但这也无声无息地失败了。

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

喜欢：

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

我加了 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 2

TLDR

vue.config.js文件中的以下代码段将起作用，并允许您访问应用程序的版本APPLICATION_VERSION：

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

提示：

甚至不要尝试向process.envvia添加一些键webpack.definePlugin：它不会像您期望的那样工作。

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

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

这表明以definePlugin某种方式允许向processor添加变量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 正确记录。

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

当您登录时process.env，VUE_APP_ACME_VERSION密钥不会出现在对象中。但是，一个 rawconsole.log('process.env.VUE_APP_ACME_VERSION')将按111预期产生。

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

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

Answer 3

您只需导入 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