nuxt.jsは環境変数を追加して、プロジェクトの包装環境の操作を区別します。

最近は業務需要のため、nuxt.jsプロジェクトを開発しました。
パッケージ環境変数を設定するとnuxt.jsのドキュメントは簡単すぎて参照できません。
いくつかの資料を調べて、この問題を解決しました。文書に整理して、ここに発表して、同行にいくつか参照してください。
一、cross-envプラグインを追加する
npm
npm i cross-env
yarn
yarn add cross-env
二、環境変数ファイルを追加する
ルートディレクトリにenv.productionを追加します。
NODE_ENV='production'
VUE_APP_.TITLE='production'
ルートディレクトリにenv.testファイルを追加します。
NODE_ENV='production'
VUE_APP_.TITLE='test'
三、グローバル環境変数の注入
nuxt.co nfit.jsに環境変数の設定を追加します。

export default {
 env: {
   VUE_APP_TITLE: process.env.VUE_APP_TITLE
 }
}

四、包装コマンドの変更
package.jsonで以下のコマンドを修正します。

"scripts": {
  "dev": "nuxt",
  "build": "cross-env process.env.VUE_APP_TITLE=production nuxt build",
  "build:test": "cross-env process.env.VUE_APP_TITLE=test nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "test": "jest"
 }

yarn buildを実行して環境バッグを生産します。yarn build：testはテスト環境バッグを打ちます。
補足知識：vueプロジェクトは環境パッケージの具体的なステップに分けられています。
第一歩：cross-envをインストールする
npm install--save-dev cross-env
クロスプラットフォーム設定と環境変数を使用したスクリプトを実行します。
ステップ2：package.jsonを修正する
package.jsonで
にパッケージコマンドを設定します。主にvue-cliを使って作成したプロジェクトに基づいて、プロファイルはNODE_に基づいています。ENV=productionを処理して、できるだけ少ない変更によって元の配置ファイルの原則を変えて、私達はここにいます。ENVは全部プロデュースしたほうがいいです。
EVNを一つ追加しますCONFIGフィールドは環境を区別します。
NODE_ENV=production EVN_CONFIG=devに対応しています
process.env.EVN_CONFIGとは、package.jsonのEVN_のことです。CONFIG）とconfig/index.jsのbuild環境値は対応関係があります。
package.jsonファイルの中のscripts内容に個性を加えて、新しい定義のいくつかの環境の包装過程を加えて、中のパラメータは前のコーディネーターと一致しています。
“build：dev”：“cross-env NODE_”ENV=production EVN_CONFIG=dev node build/build.js"
「build:test」：「cross-env NODE_ENV=production EVN_CONFIG=testing node build/build.js"
「build：prod」：「cross-env NODE_ENV=production EVN_CONFIG=production node build/build.js"

ステップ3：config/index.jsを修正する
config/index.jsファイルのbuildパラメータを修正します。ここでのパラメータはbuild/webpackage.prod.co nf.jsで使用されます。

ステップ4でbuild/webpackage.prod.com nf.jsを修正します。

env------process.env.EVN_CONFIGはconfig/index.jsのbuild環境値と対応関係があります。

true
testing<br><br>console.log(env) ----
{ NODE_ENV: '"production"', EVN_CONFIG: '"testing"' }

テスト環境とオンライン環境を区別するためのパッケージ参照経路

index:テンプレート
asetRoot：梱包後のファイル保存の経路
astes SubDirectory：index.以外の静的資源を保存する経路、
assites PublicPath：包装した後、index.の中で資源の相対的な住所を引用することを表します。

build: {
  //   test dev prod        
  production: require('./prod.env'),
  dev: require('./dev.env'),
  testing: require('./test.env'),
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
 
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  // assetsRoot: process.env.EVN_CONFIG === 'testing'?'../dist':'../h5',
  // assetsSubDirectory: './static',
  // assetsPublicPath: '/h5/',
  assetsSubDirectory:process.env.EVN_CONFIG === 'testing' ? './static':'static',
  assetsPublicPath:process.env.EVN_CONFIG === 'testing' ? '/h5/':'/',

以上のnuxt.jsは環境変数を添加して、プロジェクトを区分して環境を包装して操作します。つまり、小編はみんなに共有する内容です。