環境ごとに Vue プロジェクトをパッケージ化する方法-jsチュートリアル-php.cn

環境ごとに Vue プロジェクトをパッケージ化する方法

php中世界最好的语言

リリース： 2018-04-11 13:35:02

オリジナル

1940 人が閲覧しました

今回は、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.js

module.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'),