Vueが好きすぎてしがみついている亡霊です。
まだまだこの家に棲みたいので、棲家を快適にするために毎回行なっている設定をまとめていきます。
あわよくばVueに興味を持っている、新しいお客様の敷居を下げられることを願って。

環境

• vue@2.6.14
• @vue/cli 4.3.0
• vue router 3.1.6

上記がインストールできている状態で進んでいきます。
3xにしていなかったことに今更気がつきました。そちらでも動くとは思います。
そういえば、Vue CLIに新しいバージョンが出ていましたね（22/2/19）。

ついでにバージョンの確認方法

Vue

npm list -g vue

Vue CLI

vue --version

参考サイト：https://qiita.com/Sinhalite/items/64731c0a84cadb516a24

Pugの導入

yarn add pug pug-plain-loader
// App.vue

<template lang="pug"> // langを指定
div#app
</template>

参考サイト：https://kic-yuuki.hatenablog.com/entry/2019/01/27/155050

vue-headの導入

npm i vue-head --save
// index.js

import VueHead from 'vue-head';
Vue.use(VueHead);
// App.vue

export default {
  head: {
    title: {
      inner: "子ページのタイトル",
      separator: "｜",
      complement: "ページ自体のタイトル",
    },
    meta: [
      { name: "description", content: "descriptionの内容" },
      {
        name: "viewport",
        content: "width=device-width,initial-scale=1.0,user-scalable=no",
      },
      { charset: "utf-8" },
      { property: "og:type", content: "website" },
    ],
    link: [
      { rel: "stylesheet", href: "外部CSSファイル" },
      { rel: "shortcut icon", href: "ファビコン" },
    ],
    script: [
      { type: "text/javascript", src: "外部JSファイル", async: true },
      // body内に挿入したい場合は「body: true」を入れる
      // {
      //   type: "text/javascript",
      //   src: "外部jsファイル",
      //   async: true,
      //   body: true,
      // },
    ],
  },
};

ページごとに指定する必要がある場合、App.vueでは記載せずそれぞれに記載します。

// Example.vue

export default {
  head: {
    title() {
      return {
        inner: "子ページのタイトル",
        separator: "｜",
        complement: "ページ全体のタイトル",
      };
    },
  },
}

参考サイト：https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/21/104519

Mixin

src
├assets
├components
・
・
・
├mixins
・└Mixin.vue
・
・
└
上記の箇所にファイルを作成する。

// Mixin.vue

<script>
export default {
  data() {
    return {
      example: "example",
    };
  },
};
</script>

使いたいファイルでimport。

// App.vue

<script>
import Mixin from "@/mixins/Mixin.vue";
export default {
  name: "App",
  mixins: [Mixin],
  mounted() {
    console.log(this.example);
  },
}

僕は画像を全て絶対パスで書き出しているので、mixinにURLを格納するのは必須の作業です。

buildの準備

vue.config.jsの設定

これはVue CLI v5以前だとデフォルトでは入っていないファイルです。→新規作成し、ディレクトリの直下に配置します。
また、v5でもこの記載はないので追加する必要があると思われます。（未検証）

// vue.config.js

module.exports = {
  publicPath: "./",
};

routeの定数化

localhostで確認するときは/で問題ないのに、buildするためにサーバーに準じた文字列に毎度変更するのは面倒。
ということで定数にします。

// index.js

import Home from "../views/Home.vue";

const route = "/example/";
// localhostでは/のみ

const routes = [
  {
    path: `${route}`,
    name: "Home",
    component: Home,
  },
];

これで編集・buildがしやすくなりました。