複数環境
VUE-CLIはデフォルトのみ提供devしてprod2つの環境を。しかし、実際は本当にポジティブ開発プロセスにおける意志おそらく複数sitまたはstage環境、いわゆるプレリリーステスト環境と環境。だから我々は単にコードを変更する必要があります。別の環境変数を設定するために実際には非常に簡単です
"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",
复制代码コード自体を決定した後、それは望んでいたこと
var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
复制代码VUE-CLIの新バージョンでは、構築されたwebpack-bundle-analyzer、非常に使いやすいモジュール分析の何かを、。この方法はまた、使用することは非常に簡単で、パッケージ以前のように、NPMスクリプトすることができます。
//package.json
"build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true npm_config_report=true node build/build.js"
//之后通过process.env.npm_config_report来判断是否来启用webpack-bundle-analyzer
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())ルータビュー
異なるルータ同じコンポーネントVUE。実際のビジネスシナリオは、これは多くのことを起こります。そのようなものとして
私が作成し、2ページの切り替えは、VUE作成またはマウントフックをトリガしていない場合、デフォルトでは、同じコンポーネントを使用して、編集ページ、公式は、変更の時計$ルートのプロセスを通じて行うことができます言ったが、実際には本当にそれは非常に面倒です。そして、後で私たちは、あなたは、単にフックを再レンダリングトリガーするルーティングスイッチを確実にするために、ルータ・ビューに一意のキーを追加できることを見つけます。このように、よりシンプル。
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}