Vuejsのモジュールのインポートエラー

Vuejsのモジュールのエラー

エラーの内容: モジュールのインポートができなかったため、"./components/sample" 以外の方法で調べた。 エラー内容： エラー解決の手順 １、App.vueとmain.jsモジュールインポートのコードの変更 ２、App.vueのコンポーネントの追加 ３、開発用にファイルをビルトする。 技術：Vuejs2,VueCli

App.vueのエラーコード

import sample from "./components/sample";

export default{
  data() {
    return{
      number: 10
    }  
  },
  components: {
    Sample
  } ,

App.vueの構成とコンポーネントの追加

1、"./"を"@/"に変更 2、コンポーネントの追加

import GoodHeader from "@/components/Sample.vue";
import About from "@/components/Sample1.vue";
import Home from "@/components/Sample2.vue";

export default {
  data() {
    return {
      number: 10
      
      }
  },
  components: {
    Sample,
    Sample1,
    Sample2
  }

main.jsのエラー解消前

ここのファイル変更して、App.vueと同期する

import Vue from 'vue';
import App from './App.vue';
import GoodNum from "./components/sample.vue";

エラーの解消内容

App.vueと同様に、main.jsも"@/components/"に変更した。

import Vue from 'vue';
import App from './App.vue';
import sample from "@/components/sample.vue";

モジュール変更後の処理

開発用に、ファイルの構成をビルトした

npm run build 
npm run serve　//サーバーの立ち上げ