vue-cli 4足場の構築

1602 ワード

vue-cli 4足場の構築:


参考:https://www.cnblogs.com/blcorder/p/12015715.html

環境設定


以下はプロジェクトの環境構成についてですが、私はtest、preview、productionでそれぞれテスト、プレビュー、生産の3つの環境を表すのが好きです。


パッケージを変更します.jsonファイルは以下の通りです

"scripts": {
    "lint": "vue-cli-service lint",
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "test": "vue-cli-service build --mode test",
}

プロジェクトのルートディレクトリの下に新規作成します。env.test、 .env.productionファイル、それぞれ2つの環境のプロファイルに対応して、名前は--modeの後ろの名前とそれぞれ対応することに注意します


.env.testコードは以下の通りです
    NODE_ENV="test"
    VUE_APP_BASE_URL=" "

.env.productionコードは次のとおりです.
    NODE_ENV="production"
    VUE_APP_BASE_URL=" "

OK,これで環境が構成され,それぞれ以下のコマンドで異なる環境のパッケージをパッケージ化すればよい.
また、ローカル環境はデフォルトで使用する.env.開発ファイルで構成を読み込むので、新しい構成を作成して保存する必要があることを覚えておいてください.
私のenv.開発コードは次のとおりです.
    NODE_ENV="development"
    VUE_APP_BASE_URL=" "

プロジェクト構成


vue-cli 3から0 buildとconfigディレクトリを開始するとキャンセルされ、構成を変更する必要がある場合は、プロジェクトのルートディレクトリにvueを新規作成できます.config.jsファイルは、プロジェクトの構成を上書きします.プロジェクトの構成が多いため、ここではそれぞれ説明しません.公式ドキュメントhttps://cli.vuejs.org/zh/config/#vue-config-jsにアクセスできます.例えば、
module.exports = {
    /* */
    assetsDir: undefined,
    publicPath: './',
    outputDir: './surface'
}