《初心者》vue-cli-service build とは?開発環境毎に設定値を変える方法などを紹介

Vue.js

vue-cli

vueの開発ツール

vue開発で役立つコマンドが用意されていたり、開発の一部をGUIで行うことを可能とする開発ツールです。githubでソースファイルも公開されています。

vuejs/vue-cli
🛠️ Standard Tooling for Vue.js Development. Contribute to vuejs/vue-cli development by creating an account on GitHub.

使い方も簡単です。以下のコマンドを入力するとvue-cli-serviceがインストールされ、開発ツールが起動します。

この「Vue Project Manager」を使ってVueプロジェクトの作成や管理をすることができます。今回の記事ではそれらの方法に関しては扱いません。

vue-cli-service buildの役割

JavaScript/CSS/HTMLを1つのファイルにまとめる

Vue CLIの公式サイトには以下のように書かれています。

vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.

引用:「Vue CLI」

CLI Service | Vue CLI
🛠️ Standard Tooling for Vue.js Development

a production-ready bundleは直訳で「本番用バンドル」です。複数のファイルを最適化して1つのファイルにまとめたものをバンドルといいます。 vue-cli-service buildはVueプロジェクトに存在するソースファイルをバンドラーによってバンドル化する為のコマンドです。

ビルド環境によって設定値を変更する

ローカル環境、開発環境、本番環境で使用するエンドポイントのURLなどを変更したい場合はenvファイルを作成します。今回はローカル環境の「env.development」開発環境の「env.production」本番環境の「env.staging」を作成しました。

・env.development

・env.production

・env.staging

env.developmentの中身。

これらのファイルを作成した後、vue-cli-service build --mode developmentのコマンドを叩くと、このファイルの中で定義されたVUE_APP_API_ENDPOINTはjsファイルからprocess.env.VUE_APP_API_ENDPOINTで参照した状態でコンパイルされます。このようにして、環境毎にエンドポイントの向き先を変更することも可能です。

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

普段の業務で一番疲れる目を癒すために目元マッサージャーを毎日使っています。保温とマッサージを自動でしてくれるので、終わった後は血行が良くなり、翌日の目の疲労が激減します。また睡眠の質もあがるのでディスプレイと睨めっこの職業の方は必須アイテムだと思ってます。(笑)

座っている時の負担を減らす

8時間働くとして、その時間の殆どが椅子に座っている状態になるのがエンジニアの宿命です。椅子の性能が低いと身体に余計な負荷を掛けることとなり、良い椅子に座っている人と、そうでない椅子に座っている人にかかる1日の負担はかなり大きいです。ですので、身体への負荷を考えて、できるだけ良い椅子に座るべきです。とは言っても会社の椅子は既に決まっているので以下のクッションを購入することをおすすめします。体を包み込むようなフォールド性があり、疲労や腰の痛みなどが激減します。

自宅での作業効率をあげる椅子

最近購入したのがゲーミングチェアです。楽天ゴールドカードを持っている私は、Amazonではなく楽天市場でこの機種と似たようなものを購入しました。価格帯はほぼ同じで、このゲーミングチェアはAmazon内での評判も良いみたいですし、おすすめです。その理由は作業し終わった後の疲労感が異なり、座り心地もホールド感があって最高ですし、見た目がかっこいいからです。予算に余裕のある方は購入してみてはいかがでしょうか?

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございます。また技術、経済、株式投資などのことを Twitter でも呟いていますので良かったらフォローよろしくお願いします。

タイトルとURLをコピーしました