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.ts我读process.env ，但它不包含版本（我试过几个变种于此，就像在链接页面生成PACKAGE_JSON场等，生成普通值像“富”，而不是从阅读package-json )。 它从未奏效，就像代码被忽略了一样。 我想process.env稍后会被 vue webpack 的东西重新定义。

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

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

喜欢：

 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. 使用@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的组件中使用它

Answer 2

TLDR

vue.config.js文件中的以下代码段将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正确记录。

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

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

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

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

Answer 3

构建 Vue 应用程序时， 过滤掉不以VUE_APP_前缀开头的环境变量。 NODE_ENV和BASE_URL环境变量是例外。

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

在构建期间设置环境变量的情况下，查看Vue CLI正在做什么很重要。

Vue CLI 使用webpack.DefinePlugin使用调用resolveClientEnv返回的对象设置环境变量。

resolveClientEnv返回

{
   '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 4

你最初的尝试很好，你只是错过了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 文档推荐'process.env.VERSION'方式（黄色面板）：

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

Answer 5

您可以简单地导入 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 6

官方解决方案往往更可靠Modes and Environment Variables | 命令行界面

提示

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

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

module.exports = {
  // config
}

Answer 7

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

简而言之，只需在vue.config.js包含以下vue.config.js ：

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

module.exports = {
  // config
}

文件 2020-10-27 ：

您可以在应用程序代码中访问 env 变量：

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

在构建process.env.VUE_APP_NOT_SECRET_CODE ， process.env.VUE_APP_NOT_SECRET_CODE将被相应的值替换。 在VUE_APP_NOT_SECRET_CODE=some_value的情况下，它将被替换为"some_value" 。

除了VUE_APP_*变量之外，还有两个特殊变量在您的应用程序代码中始终可用：

• NODE_ENV - 这将是“开发”、“生产”或“测试”之一，具体取决于应用程序运行的模式。

• BASE_URL - 这对应于 vue.config.js 中的 publicPath 选项，并且是您的应用程序部署的基本路径。

Answer 8

官方 VueJS 论坛上的答案是这样的：

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 9

单班轮替代方案：

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

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