☰

Vue cli 3はpackage.jsonから情報を表示します 質問する

tag-icon • tag-icon javascript vue.js webpack vuejs2 vue-cli-3
Vue cli 3はpackage.jsonから情報を表示します 質問する

vue cli 3 プロジェクトで、Web ページにバージョン番号を表示したいと考えています。バージョン番号はファイル内にあります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が、VERSION が含まれていません (リンクされたページのように PACKAGE_JSON フィールドを生成したり、 から読み取る代わりに 'foo' のようなプレーンな値を生成するなど、これに対していくつかのバリエーションを試しました)。これは機能せず、コードが無視されているようです。は、後で vue webpack によって再定義されているpackage-jsonと思います。process.env

ただし、ログインprocessには、モードやファイルで定義された VUE_APP 変数など、vue-cli プロジェクトに通常含まれるmain.tsすべてのものが含まれます。process.env

  1. processconfigure webpack関数の右側に記述してみてください。

のように：

 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です。

ベストアンサー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

おすすめ記事