【VueによるSPA構築】Vueの設定関係についてまとめました

課題を持った人

Vue.jsでシングルページアプリケーションを構築するための設定関係について知りたいな。

こういった要望に答えます。

筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。

この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。

vue.config.js

vue.config.jsではアプリケーション全体に関わるような設定をすることができます。
参考に、
・ベースURL
・アプリケーション全体に関わるcssの設定方法
の設定方法を以下に書きます。

router.js

router.jsにはパス、ページ名、パスに紐付くコンポーネント等を指定します。基本的には以下のような形です。

しかし、上の設定だけだとroute.jsに設定していないURLにアクセスがあった場合、ページが表示されなくなってしまいます。それを解決するために、以下のように設定して、router.jsにないURLにアクセスした場合は所定のページにリダイレクトするようにしておくといいと思います。

単一ファイルコンポーネントのdataプロパティの使い方

単一ファイルコンポーネント(.vueファイル)でdataプロパティを使う場合は、関数にしてオブジェクトとしてリターンする必要があります。「data: { message: ‘Hello’ }」のように設定しても機能しないので注意しましょう。

筆者

このページは今後もすこしずつ書き加えていきますので、時々チェックしてもらえると嬉しいです。