Vue cli 3은 패키지의 정보를 표시합니다.json

Vue cli 3은 패키지의 정보를 표시합니다.json

vue cli 3 프로젝트에서 웹 페이지에 버전 번호를 표시하고 싶습니다.는 「」에 .package.jsonfilename을 클릭합니다.

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는 는는책 read read를 읽었다.process.env VERSION은 되어 있지 않습니다와 같이 하고 VERSION에서 '같은 하는 등 했습니다).package-json동작하지 않았습니다.이치엔...process.env웹 팩

process 합니다.main.ts이 모든 다 요.process vue-cli 프로젝트에서에 포함되어 .VUE_APP의 VUE_APP의 VUE입니다..envfiles.complete files files files files files files files files.

2. 도 한 번 써보세요.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. 하다를 사용하세요.config.plugin('define')@Oluwafemi에서 ,

예를 들어 다음과 같습니다.

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입니다.

2센트를 더하면 더 짧고 올바른 방법을 찾을 수 있을 것 같아서 추가하겠습니다(https://docs.npmjs.com/misc/scripts#packagejson-vars)

vue.config에 추가합니다.내보내기 전 파일, 내부 파일이 아닌 파일:

process.env.VUE_APP_VERSION = process.env.npm_package_version

그리고!

다음 이 할 수 .process.env.VUE_APP_VERSION

TLDR

은 음음 the the the의 토막입니다.vue.config.js에 file, file, file, file, file, file, file, file, file, file, file, file, file, file, file, file, file, file, file, file 등의 으로 액세스할 수 .APPLICATION_VERSION:

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

힌트:

process.env★★★★★★★★★★★★★★★★★를 통해webpack.definePlugin하지 않습니다 예상대로 되지 않습니다.

이전의 노력이 효과가 없는 이유

국,, 는는를 the로 를 해결했습니다.webpack.DefinePlugin 큰 definePlugin를 쓰다process.env.PACKAGE_JSON★★★★★★ 。

보면 알 수 있어요.definePlugin든 변수를 할 수 process ★★★★★★★★★★★★★★★★★」process.env렇지않않 않않않다다를 할 때마다process.env제가 수 .process.env: 그래서 저는definePlugin기술이 작동하지 않았습니다.

사실, 뭐?webpack.definePlugindoes는 컴파일 시 문자열을 체크하여 코드 바로 위의 값으로 변경하는 것입니다.그래서, 만약 여러분이ACME_VERSION변수:

module.exports = {
  lintOnSave: true,

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

그리고 나서, 안에main.js인쇄하다console.log(ACME_VERSION), 을 얻을 수 있습니다.111 올바르게 기록되었습니다.

그러나 이것은 컴파일 시 문자열 변경에 불과합니다.대신ACME_VERSION정의하려고 합니다.process.env.VUE_APP_ACME_VERSION...

로그할 때process.env그VUE_APP_ACME_VERSION키가 오브젝트에 표시되지 않습니다.단, 생은console.log('process.env.VUE_APP_ACME_VERSION')양보하다111역시나

즉, 원래 링크와 제안된 솔루션은 어느 정도 정확했습니다.그러나 실제로는 아무것도 추가되지 않았습니다.process물건.로그하고 있었어요proccess.env처음 시도했을 때는 아무 것도 안 보였어요.

하지만, 이제,process오브젝트는 수정되지 않았습니다.컴파일 시 vue 앱에 변수를 로드하여 사용하지 않는 것이 좋습니다.기껏해야 오해의 소지가 있지

패키지를 Import하기만 하면 됩니다.json 파일을 작성하고 변수를 사용합니다.

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);

https://github.com/webpack/webpack/issues/237

Vue 앱을 빌드할 때 접두사로 시작하지 않는 환경 변수가 필터링됩니다. NODE_ENV ★★★★★★★★★★★★★★★★★」BASE_URL환경변수는 예외입니다.

위의 정보는 이 상황이 아닌 Vue 앱을 빌드하기 전에 환경 변수를 설정한 경우에 적용됩니다.

환경변수가 설정되었는지 것이 합니다.Vue CLI고고있있있있다다

Vue CLI 는 콜에서 에 반환된 객체를 사용하여 환경변수를 설정하기 위해 사용합니다.

resolveClientEnv

{
   'process.env': {}
}

, 할 때 . 이 값이 .그러면 이 값은process.envkey는 확인된 클라이언트 환경의 키와 사용자의 키를 포함하는 개체입니다.

chainWebpack키: ""를 선택합니다.vue.config.js이 일을 끝낼 수 있는 방법 중 하나일 뿐이에요

되어 인수가 되었습니다.DefinePlugin는 기반이 환경변수를 사용하여 하고 싶은 수 있습니다.webpack-chainAPI를 사용합니다.

// 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' 패널 way(노란색 패널):

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

공식 솔루션은 신뢰성이 높은 모드와 환경변수| Vue CLI

팁.

vue.config.js 파일에 env 값을 계산할 수 있습니다.VUE_APP_로 접두사를 붙여야 합니다.이것은 버전 정보에 도움이 됩니다.

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

module.exports = {
  // config
}

나는 받아들여진 답변을 시도했지만 오류가 있었다.에서 만, vue docs, 음, 음, 음, 음, 음, 음, 실, 실, 실, 실, 실, 실, 실, 실, 실, 실, however, however, ),, ), (, (, (, (, (, (, (, (, (, (, (, (, (, (, (, (, (,@antoni의 답변입니다.

음음, 음음음음음 음음음음 에는 과 같은 것이 .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해당 값으로 대체됩니다. VUE_APP_NOT_SECRET_CODE=some_value, 하다, 라고 합니다."some_value".

★★★★★★★★★★★★★★★★ VUE_APP_*또한 앱 코드에서 항상 사용할 수 있는 두 가지 특수 변수가 있습니다.

• NODE_ENV앱 실행 모드에 따라 '개발', '제작', '테스트' 중 하나가 됩니다.

• BASE_URLvue.config.js의publicPath는 되어 있는 입니다.

이에 대한 공식 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
        }

단일 라이너 대안:

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

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

언급URL : https://stackoverflow.com/questions/53307636/vue-cli-3-display-info-from-the-package-json