Vue.jsプロジェクトの起動時の名前を設定する

はじめに

今回は、Vue,jsプロジェクトの起動時の名前を設定する方法についての内容です。

通常の場合、プロジェクトの名称がそのまま起動時の名前になります。

vue.config.jsを編集する

vuetifyを導入したときのvue.config.jsは以下の内容になっていると思います。

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

現在の状態でnpm run serveで起動すると、タブの表示名は以下の形になります。

これは、プロジェクト名称を「front」としたためです。（c-mappプロジェクト内のフロントエンド側という意味で命名しました。）

そのため、vue.config.jsを編集してここの表示を変更します。

一度npm run serveを停止します。

module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
      title: "c-mapp",
    }
  },
  transpileDependencies: [
    'vuetify'
  ]
}

pages:以下の記述を追加しています。

entry以下の部分でwebpackのエントリーポイントを指定しています。 また、titleを記述することで、名称を変更しています。

起動すると、こんな感じになります。

entryはデフォルトでは設定の必要がないんですが、pagesを記述するときにentryを設定していないとエラーになるので設定するようにしましょう。

おわりに

leaflet導入については次回以降に行おうと思います。