Как проверить, находится ли 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 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
}
}
Ответы - Как проверить, находится ли Vue в режиме разработки? / How check if Vue is in development mode?
16.03.2018 01:32:40
Webpack используется для почти все мои вю проектов, поэтому я могу проверить, чтобы увидеть, если webpackHotUpdate присутствует.
if (webpackHotUpdate) {
console.log('In Dev Mode');
}
Он присутствует в объекте window, если запущен сервер webpack dev.
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-файл.
14.03.2019 11:58:14
Попробуйте использовать .файлы env.
Вы можете указать переменные env, поместив в свой каталог следующие файлы корень проекта :
.env # загружается во всех случаях .ОКР.локальный # загружен во всех случаях git игнорируется .ОКР.[режим] # только загружается указанный режим. ОКР.[режим.]локальный # загружается только в указанном режиме, игнорируется git
плюс
Приоритеты Загрузки ОКР
Файл env для определенного режима (например .ОКР.производство) возьмет более высокий приоритет, чем общий (напр .ЕНВ).
Документы: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
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, вероятно, может сделать это довольно легко.
13.09.2019 09:08:56
Я знаю, что это старый вопрос, но это может быть полезно для новых пользователей VueJS, чтобы узнать это решение, которое я нашел в текущей версии Vue (3.11):
При работе в режиме dev свойство Vue.config.devtools-это true, в производственном режиме это false!
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.