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

在vue cli 3项目中，我希望在网页中显示版本号。版本号位于

package.json

文件中

这是我找到的唯一的参考资料

然而，我无法让提议的解决方案发挥作用

我试过的东西

使用

webpack。在链接的资源中定义plugin

：

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的东西重新定义

然而，

process

登录

main.ts

包含vue cli项目中通常包含的所有内容，如

.env

文件中定义的模式和vue_应用程序变量

尝试写入“配置网页”功能右侧的

进程

，

比如：

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

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

比如：

但这也悄悄地失败了

使用@Oluwafemi建议的

config.plugin（'define'）

语法，

比如：

其中，

VERSION

是一个局部变量，定义为：

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

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

但这也不起作用

---

我每次都会重新开始整个项目，所以这不是为什么流程内容没有出现的原因

---

构建vue应用程序时，我的vue cli版本为3.0.1

NODE_ENV

和

BASE_URL

环境变量是例外

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

在生成期间设置了环境变量的情况下，查看

Vue CLI

正在做什么很重要

Vue CLI

使用调用返回的对象设置环境变量

resolveClientEnv

返回

{
   'process.env': {}
}

这意味着在构建时配置环境变量时，需要找到一种与现有环境变量合并的方法。 您需要执行两个数组的深度合并，以便

process.env

key的值是一个对象，其中包含来自已解析客户端环境的键和您的键

chainWebpack

为

vue.config.js

输入默认导出大约是完成此操作的方法之一

传递用于初始化

DefinePlugin

的参数可以与您希望使用底层

webpack链

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

---

您最初的尝试很好，只是缺少了

JSON.stringify

部分：

const webpack = require('webpack');

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

编辑：尽管建议使用

“process.env.VERSION”

方式（黄色面板）：

太长，读不下去了

vue.config.js

文件中的以下代码片段将实现此功能，并允许您以

APPLICATION\u 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\u JSON

变量

这表明

definePlugin

以某种方式允许向

process

或

process.env

添加变量，但事实并非如此。每当我在控制台中记录

process.env

时，我都没有找到我试图推入

process.env

的变量：因此我认为

definePlugin

技术不起作用

实际上，

webpack.definePlugin

所做的是在编译时检查字符串，并将它们更改为代码上的值。因此，如果您通过以下方式定义

ACME\u版本

变量：

module.exports = {
  lintOnSave: true,

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

然后，在

main.js

中打印

console.log（ACME\u版本）

，您将得到

111

正确记录的

然而，现在这只是编译时的一个字符串更改。如果您尝试定义

process.env.VUE\u APP\u ACME\u VERSION

，而不是

ACME\u VERSION

当您登录

process.env

时，

VUE\u APP\u ACME\u VERSION

键不会显示在对象中但是，原始的

控制台.log（'process.env.VUE_APP_ACME_VERSION'）

将产生预期的

111

因此，基本上，原始链接和建议的解决方案在某种程度上是正确的。但是，实际上没有向

进程

对象添加任何内容。在我最初的尝试中，我记录了

proccess.env

，所以我没有看到任何工作

---

但是现在，由于没有修改

进程

对象，我强烈建议任何试图在编译时将变量加载到vue应用程序的人不要使用它。这充其量只是一种误导。

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

---

官方解决方案往往更可靠

小费

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

process.env.VUE_APP_VERSION=require（'./package.json'）.VERSION
module.exports={
//配置
}

在VueJS官方论坛上，关于这一点的讨论如下：

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

module.exports = {
  lintOnSave: true,

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

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

console.log(version)

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

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

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

module.exports = {
  // config
}