Как проверить, находится ли Vue в режиме разработки?

Как проверить, находится ли Vue в режиме разработки?

13.03.2018 04:38:25 Просмотров 72 Источник

Когда я запускаю свое приложение Vue, консоль показывает:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

Итак, теперь я хочу проверить, находится ли Vue в разработке внутри моих шаблонов с помощью:

console.log("mode is " + process.env.NODE_ENV)

Но это только журналы undefined Есть ли другой способ найти NODE_ENV в Vue?

Мой webpack config имеет эту часть:

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Возможно, уместно: я использую typescript, поэтому я включил это объявление типа:

declare var process: {
    env: {
        NODE_ENV: string
    }
}
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode#comment85518979_49257650
Быстрый вопрос, почему вы хотите просмотреть среду из своих компонентов Vue? Это актуально только в подходах рендеринга на стороне сервера. Как правило, при выполнении сборки Vue создается папка dist со статическими файлами. Следовательно, проверять окружающую среду на этом бесполезно.
https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode#comment85525195_49257650
@Imre_G я хочу предварительно заполнить поля формы только тогда, когда я работаю в среде разработки. При развертывании сайта поля формы не должны быть предварительно заполнены.
https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode#comment85547045_49257650
Как вы связываете свой код в режиме разработки и производства?
https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode#comment85549142_49257650
@Kokodoko, я думаю, что накладные расходы на создание этого не оправдывают затраты на его работу. Мое предложение состояло бы в том, чтобы предварительно заполнить его и удалить его перед запуском сборки. Очевидно, что это возможная точка неудачи, но мой опыт заключается в том, что вы будете держать 1 или 2 из них в каждом проекте. Может быть, у кого-то здесь есть идея получше. Мне было бы интересно узнать.
https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode#comment85550949_49257650
Вы можете найти эту ссылку полезной: survivejs.com/webpack/optimizing/environment-variables

Ответы - Как проверить, находится ли Vue в режиме разработки? / How check if Vue is in development mode?

Imre_G

14.03.2018 03:20:36

Абсолютно самое простое решение-проверить наличие окна.расположение от вас Vue компонента. Это будет выглядеть примерно так:

if (window.location.href === 'YOUR DEVELOPMENT URL') {
    //preset form values here
}
https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode/49277654#comment85562001_49277654
Я думаю, это работает! Не уверен, что это точно отвечает на мой вопрос, но это решение, тем не менее :)
Thomas

14.03.2018 03:35:37

Если вы начали с vue-cli (по умолчанию webpack) , то это должно работать:

  connection: process.env.NODE_ENV === 'development'
    ? 'ws://localhost:5000'
    : 'wss://myawsomeproject.org'
https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode/49277952#comment85561977_49277952
да, но процесс.ОКР.Переменной NODE_ENV не определен... вот в чем была проблема.
Gene Parcellano

16.03.2018 01:32:40

Webpack используется для почти все мои вю проектов, поэтому я могу проверить, чтобы увидеть, если webpackHotUpdate присутствует.

 if (webpackHotUpdate) {
      console.log('In Dev Mode');
 }

Он присутствует в объекте window, если запущен сервер webpack dev.

https://stackoverflow.com/questions/49257650/how-check-if-vue-is-in-development-mode/49310302#comment97008018_49310302
может быть, вы должны проверить, не является ли webpackHotUpdate undefiend
Ben Clarke

15.01.2019 04:59:27

Я обычно использую:

if(window.location.href.indexOf("localhost") >= 0) {
  // Development mode    
}

Или:

if(window.location.href.indexOf("localhost") < 0) {
  // Production mode    
}

Просто ища часть URL-адреса разработки, например localhost, вам не нужно быть настолько конкретным с остальной частью адреса. Это работает в любом месте вашего проекта, в отличие process.env.NODE_ENV, который не будет работать в index.htmlнапример, html-файл.

Marco Nascimento

14.03.2019 11:58:14

Попробуйте использовать .файлы env.

Вы можете указать переменные env, поместив в свой каталог следующие файлы корень проекта :

.env # загружается во всех случаях .ОКР.локальный # загружен во всех случаях git игнорируется .ОКР.[режим] # только загружается указанный режим. ОКР.[режим.]локальный # загружается только в указанном режиме, игнорируется git

плюс

Приоритеты Загрузки ОКР

Файл env для определенного режима (например .ОКР.производство) возьмет более высокий приоритет, чем общий (напр .ЕНВ).

Документы: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

erb

17.07.2019 12:54:24

Для моего конкретного случая, когда я использую pug и просто хотел условно добавить некоторые элементы в компонент, я установил options.data опора pug-plain-loader в моем webpack.config.jsтакой, что загрузчик выглядит следующим образом:

{
  resourceQuery: /^\?vue/,
  use: [
    {
      loader: 'pug-plain-loader',
      options: {
          // Use whatever you'd use to detect mode in the webpack config
          data: { mode: process.env['PRODUCTION'] ? 'production' : 'development' },
        },
      },
    ],
  },
}

Вот полный webpack.config.js я использую: https://github.com/SuperuserLabs/thankful/blob/5913d9d0bb02e6d2f3b88c541477dc557caa4148/webpack.config.js#L76-L88

После чего я мог бы сделать:

if mode === 'development'
  | Only shown in development mode

В общем случае это оказалось сложнее, чем я ожидал вначале. Хотя кто-то хороший в Webpack, вероятно, может сделать это довольно легко.

user1192887

13.09.2019 09:08:56

Я знаю, что это старый вопрос, но это может быть полезно для новых пользователей VueJS, чтобы узнать это решение, которое я нашел в текущей версии Vue (3.11):

При работе в режиме dev свойство Vue.config.devtools-это true, в производственном режиме это false!

sr9yar

20.10.2019 08:26:27

Использование .env-файл-это распространенный способ установки переменных среды, используемых во многих стеках. Имеет смысл использовать его в Vue, а не пытаться изобретать велосипед.

Вот небольшой тест, который покажет, какие условия и варианты у вас есть.

Создайте свой проект с помощью этой команды:

vue-cli-service build

.env файл:

#.env
NODE_ENV=development
DDD=development
VUE_APP_NODE_ENV=development

Компонент вю :

mounted() {
    console.log(process.env.NODE_ENV); // OUTPUT: production
    console.log(process.env.DDD); // OUTPUT: undefined
    console.log(process.env.VUE_APP_NODE_ENV); // OUTPUT: development
},

NODE_ENV устанавливается службой vue-cli-service. Вы можете иметь несколько .env файлов и использовать vue-cli-service build --mode staging для запуска различных конфигураций.

Существуют переменные среды, используемые во время сборки, и переменные env на стороне клиента, используемые в коде компонента. Таким образом, вы не можете использовать что-то вроде DDDв своем клиентском коде, потому что Vue будет игнорировать его.

Вы можете создать свою собственную переменную env с префиксом VUE_APP_ и использовать их в своем клиентском коде для любых проверок. Документы Реф. VUE_APP_NODE_ENVбудет отлично работать в нашем тесте.

ЗАПИСКА

Разбор вашего url-адреса-не лучший выбор. Если вы используете что-то вроде этого window.location.href.indexOf("localhost"), он не будет работать для 127.0.0.1. Было несколько раз, когда мне приходилось запускать проект на полном доменном имени, и эта проверка не будет работать для него eaither.

Помочь в развитии проекта:
Закрыть X