When I run my Vue app, the console shows:
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
So now I want to check if Vue is in development from inside my templates by using:
console.log("mode is " + process.env.NODE_ENV)
But that only logs undefined
Is there a different way to find the NODE_ENV in Vue?
My webpack config has this part:
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
})
])
}
Perhaps relevant: I use typescript, so I included this type declaration:
declare var process: {
env: {
NODE_ENV: string
}
}
For Vue 3
and Vite
projects, use this from any js
or vue
file in your project:
console.log(import.meta.env.DEV)
console.log(import.meta.env.PROD)
returns boolean value
, depending on your environment.