Vue cli 3 отображает информацию из пакета.формат JSON

Vue cli 3 отображает информацию из пакета.формат JSON

14.11.2018 10:39:25 Просмотров 23 Источник

В проекте 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, как на связанной странице, и генерировать простые значения, такие как 'foo' вместо чтения из package-json). Это никогда не работало, это похоже на то, что код игнорируется. Я предполагаю, что process.env будет переопределен позже с помощью Vue webpack stuff.

Однако журнал process в main.ts содержит все то, что обычно содержится в проекте vue-cli, например, переменные mode и VUE_APP, определенные в файлах webpack.definePlugin1.

  1. Попробуйте написать в process прямо в функции configure webpack,

любить:

webpack.definePlugin3

(честно говоря, я не очень надеялся на это, но должен был попробовать).

  1. Попробовал другое решение, предложенное на связанной странице,

любить:

webpack.definePlugin4

Но и это безмолвно проваливается.

  1. Используйте синтаксис webpack.definePlugin5, предложенный @Oluwafemi,

любить:

webpack.definePlugin6

Где webpack.definePlugin7-локальная переменная, определяемая как:

webpack.definePlugin8

Но и это тоже не работает.


Я каждый раз заново запускаю весь проект, так что это не причина, по которой процессные вещи не появляются.

Мой Вью-CLI по версии 3.0.1.

У вопроса есть решение - Посмотреть?

Ответы - Vue cli 3 отображает информацию из пакета.формат JSON / Vue cli 3 display info from the package.json

Oluwafemi Sule

14.11.2018 11:06:13

При создании приложения Vue переменные среды, которые не начинаются с префикса VUE_APP_, отфильтровываются . Исключение составляют переменные окружения NODE_ENV и BASE_URL.

Приведенная выше информация применяется, когда переменные среды задаются до создания приложения Vue, а не в этой ситуации.

В ситуации, когда переменные среды задаются во время сборки, важно посмотреть, что делает Vue CLI.

Vue CLI использует webpack.DefinePlugin для установки переменных окружения с помощью объекта, возвращенного из вызова resolveClientEnv .

resolveClientEnv возвращается

{
   'process.env': {}
}

Это означает, что при настройке переменных среды во время сборки вам нужно найти способ объединить их с существующими. Вам нужно выполнить глубокое слияние обоих массивов, чтобы значение для ключа process.env было объектом, содержащим ключи из разрешенной клиентской среды и ваши ключи.

Ключ NODE_ENV0 в экспорте по умолчанию для NODE_ENV1-это только один из способов сделать это.

Аргументы, переданные для инициализации NODE_ENV2, могут быть объединены с новыми переменными среды, которые вы хотите настроить с помощью базового API NODE_ENV3. Вот такой пример:

NODE_ENV4
yuriy636

15.11.2018 01:50:46

Ваша первая попытка была в порядке, вы просто пропустили часть 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),
}),
Является ответом!
Sergeon

15.11.2018 12:40:08

Прям

Следующий фрагмент кода в файле vue.config.js сделает свое дело и позволит вам получить доступ к версии вашего приложения как APPLICATION_VERSION:

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

СОВЕТ:

Даже не пытайтесь добавить какой-то ключ к process.env через webpack.definePlugin: он не будет работать так, как вы, вероятно, ожидаете.

 Почему мои предыдущие попытки не сработали

В конце концов, я решил эту проблему с помощью webpack.DefinePlugin. Основная проблема, с которой я столкнулся, заключается в том, что первоначальное решение, которое я нашел, было использование definePlugin для записи в переменную process.env.PACKAGE_JSON.

Это говорит о том, что definePlugin каким-то образом позволяет добавлять переменные к process или process.env, что не так. Всякий раз, когда я регистрировал process.env в консоли, я не находил переменных, которые пытался протолкнуть в process.env : поэтому я думал, что технология definePlugin не работает.

На самом деле, то, что делает webpack.definePlugin, - это проверяет наличие строк во время компиляции и изменяет их на свое значение прямо в вашем коде. Итак, если вы определяете переменную APPLICATION_VERSION5 через:

APPLICATION_VERSION6

а затем, в APPLICATION_VERSION7 вы печатаете APPLICATION_VERSION8 ,вы получите APPLICATION_VERSION9 правильно зарегистрированным.

Теперь, однако, это всего лишь изменение строки во время компиляции. Если вместо APPLICATION_VERSION5 вы попытаетесь определить module.exports = { configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'APPLICATION_VERSION': JSON.stringify(require('./package.json').version), }) ] } }, } 1...

при регистрации process.env ключ module.exports = { configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'APPLICATION_VERSION': JSON.stringify(require('./package.json').version), }) ] } }, } 3 не будет отображаться в объекте. Однако необработанный module.exports = { configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'APPLICATION_VERSION': JSON.stringify(require('./package.json').version), }) ] } }, } 4 даст APPLICATION_VERSION9, как и ожидалось.

Так что, в принципе, оригинальное звено и предложенные решения были в какой-то степени правильными. Однако на самом деле к объекту process ничего не добавлялось. Я регистрировал module.exports = { configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'APPLICATION_VERSION': JSON.stringify(require('./package.json').version), }) ] } }, } 7 во время моих первых попыток, поэтому я не видел ничего работающего.

Однако теперь, поскольку объект process не изменяется, я настоятельно рекомендую всем, кто пытается загрузить переменные в свое приложение vue во время компиляции, не использовать его. Это в лучшем случае вводит в заблуждение.

Gerfried

12.03.2020 02:20:12

Вы можете просто импортировать свой пакет.файл 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

Закрыть X