web-dev-qa-db-fra.com

Comment vérifier si Vue est en mode développement?

Lorsque j'exécute mon application Vue, la console affiche:

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

Alors maintenant, je veux vérifier si Vue est en développement à partir de mes modèles en utilisant:

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

Mais cela ne consigne que undefined Existe-t-il un moyen différent de trouver le NODE_ENV dans Vue?

Mon config webpack a cette partie:

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

Peut-être pertinent: j'utilise TypeScript, alors j'ai inclus cette déclaration de type:

declare var process: {
    env: {
        NODE_ENV: string
    }
}
typescriptwebpackvue.js
11
Kokodoko

Webpack est utilisé pour presque tous mes projets Vue, je vérifie donc si webpackHotUpdate est présent.

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

Il est présent dans l'objet window si le serveur de développement Webpack est en cours d'exécution.

7
Gene Parcellano

Absolument la solution la plus simple consiste à vérifier le window.location de votre composant Vue. Cela ressemblerait à ceci:

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

Si vous avez commencé avec vue-cli (webpack par défaut), cela devrait fonctionner:

  connection: process.env.NODE_ENV === 'development'
    ? 'ws://localhost:5000'
    : 'wss://myawsomeproject.org'
0
Thomas Kleßen

J'utilise habituellement:

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

Ou:

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

En recherchant simplement une partie de l'URL de développement telle que localhost, vous n'avez pas besoin d'être aussi spécifique avec le reste de l'adresse. Cela fonctionne n'importe où dans votre projet, contrairement à process.env.NODE_ENV qui ne fonctionnera pas dans le fichier index.html par exemple.

0
Ben Clarke