مشکل صفحه سفید خالی در پروژه vuejs منتشر شده

برای یکی از پروژه های شخصی که میخواستم داخل github page هم منتشر کنم، با مشکل پیدا نشدن فایل های استاتیک و خطای 404 روبرو میشدم
با توجه به اینکه قبلا هم برای منتشر کردن پروژه انگولار با مشکلی شبیه این مواجه شده بودم، اولین کار جستجو برای پیدا کردن روشی برای تغییر آدرس پایه وبسایت بود.
که با کمی جستجو به لینک زیر رسیدم
َVuejs

کانفیگ گفته شده رو در فایل vue.config.js قرار دادم، ولی مشکلی که بوجود اومد این بود که در حالت لوکال که خودم در حال کار بودم به مشکل میخورد
پس با کمی جستجو بیشتر به کد زیر رسیدم که میشه کانفیگ متفاوتی برای حالت پابلیش و لوکال قرار داد

publicPath: process.env.NODE_ENV === 'production'
    ? 'https://mhkarami97.ir/site/'
    : '/'

با قرار دادن کد بالا، مشکل تا حدودی حل شد و در حالت لوکال برنامه درست کار میکرد ولی در نسخه پابلیش شده صفحه سفید نشون داده میشد و هیچ خطایی هم داخل کنسول مرورگر نشون داده نمیشد.
باز هم شروع به جستجو کردم تا به توضیحاتی رسیدم که میگفت روش آدرس دهی که بالا دادم اشتباه هست، پس به صورت زیر تغییرش دادم.

publicPath: process.env.NODE_ENV === 'production'
    ? '/site/'
    : '/'

همچنین گفته شده بود که در قسمت router اگه mode رو روی حالت history قرار داده باشیم به این مشکل سفید شدن صفحه برمیخوریم
پس قسمت router.js رو بصورت زیر تغییر دادم

const router = new VueRouter({
  linkActiveClass: "active",
  routes,
});

حالت قبلی که باعث خطا میشد:

const router = new VueRouter({
  linkActiveClass: "active",
  routes,
  mode: "history"
});

با انجام کارهای بالا مشکل صفحه سفید حل شد و برنامه به درستی کار کرد
همچنین حواستون به آدرس عکس های صفحه باشه که به طور مثال اگه بصورت زیر باشه و شما پروژه رو داخل یه صفحه دیگه بجز صفحه اصلی گیتهاب منتشر کرده باشید، عکس ها نشون داده نمیشن.

<img src="/img/slider1.png">

که من بصورت زیر تغییر دادم

<img src="img/slider1.png">

اگه روش انتشار پروژه داخل گیتهاب رو میخواید بصورت ویدئو ببینید، میتونید از آموزش زیر استفاده کنید

َAparat