Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

1. 本番環境と開発環境を切り替える

開発環境: 開発環境は、/config/index.js の下に proxyTable を設定することです。
本番環境: プロジェクトをパッケージ化するとプロキシが無効になるため、本番環境で再設定する必要があります。

最初の方法: .envファイルを設定する

参考: https://cli.vuejs.org/zh/guide/mode-and-env.html

2番目の方法

ステップ1: 異なる環境のjsファイルを作成し、cross-envを介して切り替える

 設定
    開発    
    サンプル
  
開発
モジュール.エクスポート = {
  ベースURL: "https://test.365msmk.com"
};

サンプル

モジュール.エクスポート = {
  ベースURL: "https://www.365msmk.com"
};

ステップ2: cross-envをインストールし、package.jsonに渡されるパラメータを設定します。

インストール手順: npm install cross-env -D

package.json での設定

「スクリプト」: {
    "serve": "クロス環境 BUILD_ENV=dev vue-cli-service serve",
    "ビルド": "クロス環境 BUILD_ENV=prod vue-cli-service ビルド"
  }

ステップ3: vue.config.jsを変更してwebpackの設定を追加する

モジュール.エクスポート = {
 .....
  チェーンWebpack: config => {
    config.plugin("define").tap(args => {
      args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV);
      引数を返します。
    });
  }
};

ビジネスコード内の環境を切り替える

//process.env定数オブジェクトのBUILD_ENVを読み取ります
envType は process.env.BUILD_ENV です。

urlObj を require(`../config/${envType}.js`);

//axiosインスタンスを作成する const service = axios.create({
  ベースURL: urlObj.BASE_URL + vipUrl
});

2. フィルター

1. グローバルフィルタの定義:

Vue.filter('フィルター名',function(a,b,c) {
  //....
  
 戻る ...

})

使用：

{{ num | フィルター名 (v1, v2) }}

2. ローカルフィルター

3. 要約: フィルターの使用シナリオ: バックグラウンドデータをユーザーが最終的に表示するデータ形式に処理するために使用されます。

例: 性別、支払い状況、物流状況、タイムスタンプ。。。。。。

3. 瞬間時間ライブラリの使用

moment公式サイト: momentjs.cn/docs/

インストール手順: npm i moment

形式: moment(timestamp).format("YYYY 年 MM 月 DD 日、HH 時 mm 分 SS 秒");

フォーマット表示: http://momentjs.cn/docs/#/displaying/

現在は開発環境や本番環境を学び、毎日まとめ、日々進歩し、一日も早くIT業界のリーダーになれるよう日々頑張っています。

以上で、Vue の本番環境と開発環境の切り替え方法とフィルターの使い方についての説明は終了です。Vue の本番環境と開発環境の切り替えの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: