Vue cli 3 отображает информацию из package.json - PullRequest
Новая
       14

Vue cli 3 отображает информацию из package.json

0 голосов
/ 14 ноября 2018

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

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

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

как: 

 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. Используйте синтаксис 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 .

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

Ваша первоначальная попытка была успешной, вы просто пропустили 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' (желтая панель): 

new webpack.DefinePlugin({
  'process.env.VERSION': JSON.stringify(require('./package.json').version),
}),
0 голосов
/ 15 ноября 2018

TLDR

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

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

TIP:

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

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

В конце концов я решил проблему через 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 , правильно зарегистрированный .

Теперь, однако, это всего лишь строка изменения во время компиляции.Если вместо 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 приложение во время компиляции, чтобы не использовать его.В лучшем случае вводит в заблуждение.

0 голосов
/ 14 ноября 2018

При создании приложения 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])
      )
}
...