web-dev-qa-db-ja.com

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のみを記録しますVueでNODE_ENVを見つける別の方法はありますか？

私の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
    }
}
typescriptwebpackvue.js
16
Kokodoko

WebpackはほとんどすべてのVueプロジェクトに使用されるため、webpackHotUpdateが存在するかどうかを確認します。

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

Webpack devサーバーが実行されている場合、windowオブジェクトに存在します。

13
Gene Parcellano

Vue-cli（デフォルトのwebpack）で始めた場合、これは動作するはずです：

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

絶対に最も簡単な解決策は、あなたからwindow.locationを確認することですVueコンポーネント。これは次のようになります。

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

.envファイルを使用してみてください。

プロジェクトルートに次のファイルを配置することにより、env変数を指定できます。

.env＃すべての場合にロード.env.local＃すべての場合にロード、gitにより無視.env。[mode]＃指定されたモードにのみロード.env。[mode] .local＃指定モードにのみロード、gitに無視

プラス

環境負荷の優先順位

特定のモード（例：.env.production）のenvファイルは、一般的なモード（例：.env）よりも優先度が高くなります。

ドキュメント： https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

1
Marco Nascimento

パグを使用し、コンポーネントにいくつかの要素を条件付きで追加したい特定のケースでは、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が得意な人であれば、おそらくこれを簡単に行うことができます。

0
erb

私は通常使用します：

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

または：

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

localhostのような開発URLの一部を検索するだけで、アドレスの残りの部分をそれほど具体的にする必要はありません。これは、たとえばprocess.env.NODE_ENVファイルでは機能しないindex.htmlとは異なり、プロジェクトのどこでも機能します。

0
Ben Clarke

私はこれが古い質問であることを知っていますが、新しいVueJSユーザーがVue（3.11）の現在のバージョンで見つけたこのソリューションを知るのに役立つかもしれません：

開発モードで実行する場合、プロパティVue.config.devtoolsはtrueで、プロダクションモードではfalseです！

0
user1192887