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

Когда я запускаю приложение 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 есть эта часть:

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
    }
}

Ответы

Ответ 1

Webpack используется практически для всех моих проектов Vue, поэтому я проверяю, присутствует ли webpackHotUpdate.

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

Он присутствует в объекте window, если работает веб-сервер devp.

Ответ 2

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

  connection: process.env.NODE_ENV === 'development'
    ? 'ws://localhost:5000'
    : 'wss://myawsomeproject.org'

Ответ 3

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

if (window.location.href === 'YOUR DEVELOPMENT URL') {
    //preset form values here
}

Ответ 4

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

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

.env # загружается во всех случаях .env.local # загружается во всех случаях, игнорируется git.env. [mode] # загружается только в указанном режиме .env. [mode].local # загружается только в указанном режиме, игнорируется git

плюс

Env Загрузка Приоритеты

Файл env для определенного режима (например,.env.production) будет иметь более высокий приоритет, чем общий (например,.env).

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

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

vue-cli-service build

.env file:

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

Vue компонент:

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_ и использовать ее в своем клиентском коде для любых проверок. Документы ref. VUE_APP_NODE_ENV будет отлично работать в нашем тесте.

Примечание

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

Ответ 8

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

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.