vue2.0 は、さまざまな環境構成に応じてさまざまなパッケージをコンパイルします

1. プロジェクトのクロス環境インストール。Cross-env は、環境変数を設定および使用するノード スクリプトです: npm installcross-env -D

2. ルート ディレクトリの package.json ファイルで、script オブジェクトの build フィールドの値を次のコードに変更します。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env env_config=prod node build/build.js",
    "build:test": "cross-env env_config=test node build/build.js",
    "build:pre": "cross-env env_config=pre node build/build.js",
    "build:report": "npm_config_report=true npm run build",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },

コードの説明: Cross-env スクリプトを使用し、新しいグローバル変数 env_config を追加しました。後ほど、このグローバル変数の値に基づいて、さまざまな開発環境の変数値が呼び出されます。呼び出しメソッド: process.env.env_config。

3. コンソール プロンプト ステートメントを変更します。ルート ディレクトリの build/build.js ファイルでコード行const spinner = ora('building forproduction...')を見つけ、それをconst spinner = ora(' Building for Production...') '+process.env.env_config+'Environment package...')。これは、どの環境パッケージがパッケージ化されているかを知るのに便利です。

4. ルート ディレクトリの /config/prod.env.js ファイルで、環境ごとに異なる変数値を作成します。

prod: {
    NODE_ENV: '"production"',
    BASE_URL: '""',
    OUT_PUT: '../dist'
  },
  test: {
    NODE_ENV: '"test"',
    BASE_URL: '""',
    OUT_PUT: '../test'
  },
  pre: {
    NODE_ENV: '"pre"',
    BASE_URL: '""',
    OUT_PUT: '../pre'
  }

出力中にさまざまなフォルダーを生成するために、out_put 変数がここに追加されます。API ファイル内で process.env.BASE_URL を直接使用して変数を取得します

5. .env のアクセスアドレスを変更して、対応する環境の変数を呼び出す ルートディレクトリの /build/webpack.prod.conf.js ファイル内の以下の env 値を変更し、env_config に従って取得します

plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env[process.env.env_config]
    }),

6. config/index.js ファイルの出力先アドレスを変更します。

build: {
    // Template for index.html
    index: path.resolve(__dirname, `${env[process.env.env_config].OUT_PUT}/index.html`),

    // Paths
    assetsRoot: path.resolve(__dirname, env[process.env.env_config].OUT_PUT),
    assetsSubDirectory: 'static',
}

7. npm run build:test を実行して、さまざまな環境用のパッケージを作成します。