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

Question

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

我找到的唯一引用 is this link in the vue forum .

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

我尝试过的事情

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

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

1. 尝试在 configure webpack 函数上写入 process，

喜欢:

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

(老实说，我对此并不抱太大希望，但不得不尝试)。

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

喜欢:

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

但这也会悄无声息地失败。

1. 使用@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

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

从组件中使用它