ホームページ > 記事 > ウェブフロントエンド > 環境ごとに Vue プロジェクトをパッケージ化する方法
今回は、Vue プロジェクトを環境ごとにパッケージ化する方法を説明します。Vue プロジェクトを環境ごとにパッケージ化する際の 注意事項 について、実際のケースを見てみましょう。
ステップ 1: クロス環境をインストールする
プロジェクト ディレクトリで次のコマンドを実行して、cross-env をインストールします。IDE のターミナル ウィンドウで直接実行することもできます。また、Windows CMD または Linux ターミナルからプロジェクトのルート ディレクトリに移動して、次のコマンド。npm i --save-dev cross-env
ステップ 2: 各環境のパラメータを変更する
test.env.js と pre.env.js を config/ ディレクトリに追加します。 prod.env.js の内容を変更します。 変更内容は次のとおりです:'use strict' module.exports = { NODE_ENV: '"production"', EVN_CONFIG:'"prod"', API_ROOT:'"/apis/v1"' }test.env.js ファイルと pre.env.js ファイルの内容をそれぞれ学習して変更します。 変更された内容は次のとおりです:
'use strict' module.exports = { NODE_ENV: '"testing"', EVN_CONFIG:'"test"', API_ROOT:'"/test/apis/train"' } 'use strict' module.exports = { NODE_ENV: '"presentation"', EVN_CONFIG:'"pre"', API_ROOT:'"/pre/apis/train"' }dev.env.js ファイルの内容を変更します。 変更内容は以下のとおりです。開発環境はサービス プロキシを使用して構成されており、API_ROOT の前の API は構成されたプロキシ アドレスです。
りー
ステップ 3: プロジェクトの package.json ファイルを変更する
package.json ファイル内のスクリプト コンテンツをパーソナライズし、環境用に新しく定義されたいくつかのパッケージング プロセスを追加します。パラメータは以前の調整と一致します。りー
ここでは、NODE_ENV を運用環境に設定するのが最善です。これは、運用環境の判断は utils.js で 1 回だけ行われ、個人的なテストは各環境の API パラメーターに影響を与えないためです。 ##ステップ 4: config/index.js を変更する config/index.js ファイル内のビルドパラメータを変更します。ここでのパラメータは build/webpackage.prod.conf.jsmodule.exports = merge(prodEnv, { NODE_ENV: '"development"', VN_CONFIG: '"dev"', API_ROOT: '"api/apis/v1"' })で使用されます。
ステップ 5: webpackage.prod.conf.js でビルド環境パラメーターを使用する
build/webpackage.prod.conf.js ファイルを変更し、env定数の生成方法を調整します。 りー
ステップ 6: build/build.js を調整する
process.env.NODE_ENVの割り当てを削除し、スピナーの定義を修正 調整した内容は以下の通りです:"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" },
追加:
vue2+webpackを環境別にパッケージ化する方法
今年は vue2 のシングルページ アプリケーション プロジェクトに携わる機会があり、開発から立ち上げまで 2 つの環境を経験しました。テスト環境と正式環境の両方でnpm runを実行しています。 建てる。この 2 つの環境の変数は現状では異なっており、パッケージ化する際に毎回変数を変更するのは少し面倒に感じます。その後、同僚のプロジェクトで、環境に応じて異なるコマンドを実行し、異なるパッケージを取得したことを紹介しました。たとえば、テスト環境 npm テストを実行し、正式な環境 npm でビルドを実行します。 ファイルconfig/prod.env.jsでの設定が必要ですbuild:{ // Template for index.html // 添加test pre prod 三处环境的配制 prodEnv: require('./prod.env'), preEnv: require('./pre.env'), testEnv: require('./test.env'), //下面为原本的内容,不需要做任何个性 index:path.resolve(dirname,'../dist/index.html'),npm は、現在実行中のスクリプト (事前テスト、テスト、事後テストなど) の名前を返す npm_lifecycle_event 変数を提供します。したがって、この変数を使用して、同じスクリプト ファイル内に異なる npm script コマンドのコードを記述することができます。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:
webpack の自動モバイル ビルド rem メソッドの詳細な説明
angular2 モジュールと共有モジュールの使用方法の詳細な紹介
以上が環境ごとに Vue プロジェクトをパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。