Vue cli3は、本番環境、開発環境、およびテスト環境を構成します

序文

異なるコマンドラインを介して異なる環境APIおよびその他の情報を切り替える

例えば：

npm runserveはローカル環境apiを
呼び出しますnpmruntestはテスト環境api
を呼び出しますnpmrunbuildはオンライン環境apiを呼び出します

1.最初にpackage.jsonファイルを追加します。

"test": "vue-cli-service build --mode test" 

ナレッジポイントの補足：
パラメーターの名前は、ユーザーの好みに応じて定義できます
。vuecli3serveは実行中のコードです。ビルドはパッケージ化されたコード
です。パッケージ化すると、サーブ操作が開発環境に変わり、ビルドパッケージが本番環境になります。
-modeの後にテストを追加します。これは実行することを意味します。env.testは
追加されず、serveは自動的にデフォルトになります。env.developmentビルドは自動的にdefault.env.productionになります。

2.プロジェクトディレクトリに.envファイルと.env.testファイルを作成します

2.1、.envファイル

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'

2.2、.env.testファイル

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test  //outputDir：打包时的输出目录名字，若需默认输出到dist目录，则可不写该变量

ナレッジポイントの補足：
4を参照

2.3.vue.config.jsファイルを追加します。

outputDir: process.env.outputDir, 

3.API変数を構成します

この構成はコードごとに異なる必要があります

3.1、axiosのbaseURLパスを構成します

次に、main.jsでaxiosのbaseURLを構成し、さまざまな環境に応じてさまざまなコードを構成する必要があります

/*第一层if判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {
    
    
    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
    
    
        //production 生产环境
        axios.defaults.baseURL = 'http://api.xinggeyun.com';
 
    } else {
    
    
        //test 测试环境
        axios.defaults.baseURL = 'http://192.168.0.152:8102';
 
    }
} else {
    
    
    //serve 开发环境
    axios.defaults.baseURL = 'http://192.168.0.152:8102';
}

3.2、自己スプライシングパス

文法は上記の文法と同じです。process.env.NODE_ENVに従って環境を判断し、基本パスを変更してスプライスします。

/*第一层if判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {
    
    
    /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
    if (process.env.VUE_APP_FLAG === 'pro') {
    
    
        //production 生产环境
        var baseUrl = 'https://www.xxxxxx.com/api/';
    } else {
    
    
        //test 测试环境
        baseUrl = 'http://test.xxxxx.com:9999/api/';
 
    }
} else {
    
    
    //serve 开发环境
    baseUrl = 'http://192.168.4.17:8069/b2b/api/';
}

4..envナレッジポイントの補足

4.1。ファイル名について：次のように名前を付ける必要があります。ランダムに名前を付けないでください。ロードするファイルを手動で制御する必要はありません。

ロードおよびマージされる環境に関係なく、.envグローバルデフォルト構成ファイル

.env.development開発環境構成ファイル

実稼働環境の.env.production構成ファイル

4.2、コンテンツについて

注：他の変数の設定など、属性名はVUE_APP_で始まる必要がありますVUE_APP_NAME = stark

4.3、ファイルの読み込みについて：

起動コマンドによると、vueは対応する環境を自動的にロードします。Vueはファイル名に従ってロードされるため、「ランダムに名前を付けないでください。ロードするファイルを特別に制御する必要はありません。」
　　たとえば、npm run serveコマンドを実行すると、.env.developmentファイルが自動的に読み込まれます。

注：.envファイルは、開発用か生成用かに関係なくロードされる共通ファイルです。

npm run serveを実行して最初に.envファイルをロードし、次に.env.developmentファイルをロードする場合、2つのファイルに同じアイテムがあると、後でロードされるファイルが最初のファイル、つまりenv.developmentを上書きします。 fileは、.envファイルのNOOE_ENVオプションをオーバーライドします。

プライベートケースをロードする必要がある場合は、test、-mode testのように実行できます。実行するときは、env.testファイルを実行します。

4.4、.envファイルの読み取りについて：

設定された変数はprocess.envから取得できます。