This relative module was not found:について

Question

前提・実現したいこと

AddressForm.vueをimportさせたいです。

発生している問題・エラーメッセージ

This relative module was not found:

* ./views/AddressForm.vue in ./src/router.js

該当のソースコード

ファイル名　views/AddressForm.vue
<template>
  <v-container text-xs-center>
    <v-layout row wrap justify-center>
      <v-flex xs12>
        <h1>連絡先編集</h1>
      </v-flex>

      <v-flex xs5 mt-5>
        <v-card>
          <v-card-text>
            <v-form>
               <v-text-field v-model="address.name" label="名前"></v-text-field>
               <v-text-field v-model="address.tel" label="電話番号"></v-text-field>
               <v-text-field v-model="address.email" label="メールアドレス"></v-text-field>
               <v-text-field v-model="address.address" label="住所"></v-text-field>
               <v-btn @click="$router.push({ name: 'addresses' })">キャンセル</v-btn>
               <v-btn color="info" @click="">保存</v-btn>
            </v-form>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      address: {}
    }
  }
}
</script>

ファイル名
/src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Addresses from './views/Addresses.vue'
import AddressForm from './views/AddressForm.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/addresses',
      name: 'addresses',
      component: Addresses
    },
    {
      path: '/addresses/:address_id?/edit',
      name: 'address_edit',
      component: AddressForm
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

試したこと

import している . /views/AddressForm.vue が見つからないとのことなので、フォルダ構成を見たのですが特に問題ないように見受けられます。
初心者という事もあり見方が違うかもしれませんが、御教示頂ければ幸いです。
下記フォルダ構成になります。
https://gyazo.com/49132cf7e995ee888c4c4226344c38ce

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

画像を見ると、/src/views/AddressForm.vueとなるはずのファイル名が間違っていて、AddresForm.vueになっています。

Comments

[kaksji]

早速のご回答ありがとうございます。
認識が間違っていたら大変申し訳ないのですが、ファイル名が間違いとのことで確認させていただきました。

下記AddressForm.vueのファイル名です。
https://gyazo.com/3a986f11e095e28d183f6dacf72698ff

このファイル名が誤りという認識でお間違い無いでしょうか？

[maisumakun]

そうですね、ディスクにあるファイルがAddresForm.vueなのに、参照時にAddressForm.vueと書いているために参照できていないようです。

[kaksji]

私の理解不足で申し訳ないのですが、
下記ファイル名をsrc/views/AddresForm.vue→AddressForm.vueに変更するという方法でしょうか？
https://gyazo.com/850ae310b55d190eb320bbc37e9b5514

[maisumakun]

そのとおりです。

[kaksji]

これは、router.jsのfrom'./views/AddressForm.vue'部分を'AddressForm.vue'に変更なのでしょうか？

直接src/views/AddresForm.vue→AddressForm.vueにファイル名の変更を行うと下記のフォルダ構成になるのですが、、
https://gyazo.com/7ca5f101945e9fc5adcba4bf17839cb0

[maisumakun]

ファイル名部分だけ変更、のつもりだったのですが（ふつう、「ファイル名を変更」といったときにフォルダを移動することはしませんので）。

[kaksji]

申し訳ありません。
自分の誤認の原因が分かりました。
AddresForm.vue→AddressForm.vue　ファイル名sが抜けていたんですんね。
恥ずかしながら勝手に/src/views/の部分が不要と認識しており、見当違いの発言をしていました。
拙い質問をしてしまいましたが、丁寧に回答していただきありがとうございます。