vue-cli3構成開発環境、テスト環境、オンライン環境[変更予定]

001、package.jsonファイルに追加

"scripts"：{ 
    "serve"： "vue-cli-service serve"、//開発APIを呼び出す
    "build"： "vue-cli-service build"、// 
    オンライン "test"： "vue-cli-service build --mode test "、//追加する必要があるもの、test 
}、

002.ルートディレクトリに.envファイルを作成して構成する

NODE_ENV = 'production' 
VUE_APP_FLAG = 'pro' // VueコードはVUE_APP_名を直接使用できます

003.ルートディレクトリに.env.testファイルを作成する

NODE_ENV = 'production' 
VUE_APP_FLAG = 'test' 
outputDir = test //パッケージング中にディレクトリ出力の名前を変更できます。デフォルトはdistです

004.ルートディレクトリにvue.config.jsを作成する

= {module.express 
baseUrlに：process.env.NODE_ENV === '生産' '/静的/' :? './'、
devServe：{ 
ポート：8080、
// disableHostCheck：trueに、//ホストは取り扱いの問題を認識しません
}、
baseUrl： '/'、//ベースパス、変更しないでください
outputDir：process.env.outputDir、//パッケージ生成ディレクトリ
assetDir： 'static'、
lintOnSave：false、
runtimeCompiler：true、//インクルードランタイムを使用するかどうかコンパイラーのVueビルドバージョン
productionSourceMap：false、//本番環境のソースマップ

}

005. main.jsでAPI変数を構成する

/ * ifの最初のレイヤーは、本番環境と開発環境を判断します* / 
if（process.env.NODE_ENV === 'production'）{ 
    / * .envファイルのVUE_APP_FLAGに従って、ifの2番目のレイヤーは、本番環境かテスト環境かを判断します* / 
    if（process.env.VUE_APP_FLAG === 'pro'）{ 
        //本番稼働環境
        axios.defaults.baseURL = 'http：//api.xinggeyun.com'; //パス

    } else { 
        //テストテスト環境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';//path

}} else {// dev開発環境axios.defaults.baseURL = 'http://192.168.0.152:8102';//path

最後にnpm実行テストまたは糸実行テスト

ps：outputDir = testを使用しましたが、パッケージ化後もdistのデフォルトのファイル名です。理由はわかりません。知っている場合は共有してください

最後に、私はあなたを助けたいと思います！！

オリジナル：https : //blog.csdn.net/qq_37055675/article/details/85047451

あなたは参照することができます：https : //juejin.im/post/5c63afd56fb9a049b41cf5f4

vue-cli3構成開発環境、テスト環境、オンライン環境[変更予定]

おすすめ