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