مشكلة في ال VueJs بعد رفع الموقع على الgithub

سأوضح لك ببساطة، عندما يتم تشغيل رابط مثل التالي xxx.com/gets مثلاً من متصفح الويب، يتم الاتصال بالخادم الذي مرتبط بنطاق xxx.com، وإذا كانت إعدادات vue-router قد تم تعيينها على وضعية التاريخ (history mode)، فسيتم البحث عن المسار /gets داخل ملفات الخادم.

وإذا لم يتواجد المسار /gets ضمن الملفات، سيتم عرض خطأ الصفحة غير موجودة (404).

الحلول الأسهل هي:

إنشاء ملف 404.html بنفس محتوى ملف index.html (في مجلد public)، وعندما يتم تلقي طلب لصفحة غير موجودة (404)، فقم بنسخ نفس محتوى ملف index.html داخل هذا الملف 404.html، وبتلك الطريقة، عندما يتم عرض خطأ 404، سيتم استخدام محتوى الملف 404.html بدلاً من إعادة عرض نفس صفحة الخطأ.

2- ضبط Vue Router على وضعية الهاش، حيث أن Vue Router يأتي بوضعيتين للتوجيه (Routing)، وضعية التاريخ (history mode) ووضعية الهاش (hash mode). بشكل افتراضي،

وVue Router يستخدم وضعية التاريخ، ولتعيين Vue Router إلى وضعية الهاش.عليك بتعديل تكوين Vue Router في مشروعك ليكون كالتالي:

const router = new VueRouter({
  mode: 'hash',
  // ... مزيد من الإعدادات ...
})

وعندما تقوم بتعيين وضعية الهاش (hash mode)، ستظهر علامة الهاش (#) في عنوان URL بعد اسم الموقع الأساسي، وهذا يساعد في تجنب خطأ 404 الناتج عن طلبات مباشرة للخادم على مسارات لا تتطابق مع الملفات الموجودة.

وهناك حل آخر باستخدام Travis CI، وعليك بالتالي:

1- قم بإضافة الإعدادات التالية في ملف vue.config.js الخاص بمشروعك:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

2- إنشاء ملف deploy.sh داخل مشروعك واستخدم الكود التالي:

#!/usr/bin/env sh

set -e

npm run build

cd dist

cp index.html 404.html

git init 
git add .
git commit -m "deploy to gitpage"

git push -f git@github.com:your-repo.git master:gh-pages

cd -

3- إنشاء ملف .travis.yml في جذر المشروع واستخدم الكود التالي:

language: node_js
node_js:
  - "node"

cache: npm

script: npm run deploy

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
    branch: main

4- تحديث ملف package.json ليتضمن سكربت deploy:

"scripts": {
  "build": "vue-cli-service build",
  "deploy": "npm run build && cd ./dist && cp index.html 404.html"
  // ... السكربتات الأخرى ...
},

5- ارفع مشروعك إلى GitHub لتشغيل البناء، وانتظر بضع دقائق حتى يتم البناء.

مشكلة الخطأ 404 تحدث عندما يحاول المتصفح الوصول إلى صفحة غير موجودة. قد يكون السبب وراء ظهور الخطأ 404 بعد عمل تحديث لغير الصفحة الرئيسية هو عدم تكوين الخادم الخاص بك بشكل صحيح لدعم Single-Page Application (SPA).

عند استخدام Vue.js لتطوير تطبيق SPA، يعتمد التطبيق على توجيه الصفحة داخل الواجهة الأمامية بدلاً من إعادة تحميل الصفحة بالكامل عند التنقل بين الصفحات. ومع ذلك، يتطلب ذلك تكوين الخادم بشكل صحيح للتعامل مع طلبات التوجيه.

إليك بعض الخطوات التي يمكن اتباعها لتكوين الخادم بشكل صحيح لدعم Vue.js SPA:

تأكد من أن الخادم يعيد ملف index.html لجميع طلبات التوجيه الصادرة عن التطبيق. هذا يعني أنه سواء كنت تزور الصفحة الرئيسية أو أي صفحة فرعية، يجب أن يتم إرجاع index.html كنقطة انطلاق.

تحقق من تكوين خادم الويب الذي تستخدمه للتأكد من أنه يدعم التوجيه الصحيح. على سبيل المثال، إذا كنت تستخدم Apache، يمكنك استخدام ملف .htaccess لتكوين قواعد التوجيه.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

تأكد من أن المسار المحدد في RewriteBase يطابق المسار الأساسي لتطبيقك.

قم بتحديث تكوين Vue Router في تطبيقك لاستخدام وضع التاريخ (history mode) بدلاً من وضع الهاش (hash mode). يتطلب وضع التاريخ تكوين الخادم بشكل صحيح للتعامل مع طلبات التوجيه. يمكنك تكوين Vue Router لاستخدام وضع التاريخ عن طريق تعيين الخاصية mode في ملف router.js:

const router = new VueRouter({
  mode: 'history',
  // ...
});

بعد تكوين الخادم بشكل صحيح وتحديث تكوين Vue Router، يجب أن تتمكن من الاستمرار في التنقل بين الصفحات في تطبيقك SPA دون أن تظهر مشكلة 404.

بتاريخ 20 ساعة قال Mustafa Suleiman:

سأوضح لك ببساطة، عندما يتم تشغيل رابط مثل التالي xxx.com/gets مثلاً من متصفح الويب، يتم الاتصال بالخادم الذي مرتبط بنطاق xxx.com، وإذا كانت إعدادات vue-router قد تم تعيينها على وضعية التاريخ (history mode)، فسيتم البحث عن المسار /gets داخل ملفات الخادم.

وإذا لم يتواجد المسار /gets ضمن الملفات، سيتم عرض خطأ الصفحة غير موجودة (404).

الحلول الأسهل هي:

إنشاء ملف 404.html بنفس محتوى ملف index.html (في مجلد public)، وعندما يتم تلقي طلب لصفحة غير موجودة (404)، فقم بنسخ نفس محتوى ملف index.html داخل هذا الملف 404.html، وبتلك الطريقة، عندما يتم عرض خطأ 404، سيتم استخدام محتوى الملف 404.html بدلاً من إعادة عرض نفس صفحة الخطأ.

2- ضبط Vue Router على وضعية الهاش، حيث أن Vue Router يأتي بوضعيتين للتوجيه (Routing)، وضعية التاريخ (history mode) ووضعية الهاش (hash mode). بشكل افتراضي،

وVue Router يستخدم وضعية التاريخ، ولتعيين Vue Router إلى وضعية الهاش.عليك بتعديل تكوين Vue Router في مشروعك ليكون كالتالي:

const router = new VueRouter({
  mode: 'hash',
  // ... مزيد من الإعدادات ...
})

وعندما تقوم بتعيين وضعية الهاش (hash mode)، ستظهر علامة الهاش (#) في عنوان URL بعد اسم الموقع الأساسي، وهذا يساعد في تجنب خطأ 404 الناتج عن طلبات مباشرة للخادم على مسارات لا تتطابق مع الملفات الموجودة.

وهناك حل آخر باستخدام Travis CI، وعليك بالتالي:

1- قم بإضافة الإعدادات التالية في ملف vue.config.js الخاص بمشروعك:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

2- إنشاء ملف deploy.sh داخل مشروعك واستخدم الكود التالي:

#!/usr/bin/env sh

set -e

npm run build

cd dist

cp index.html 404.html

git init 
git add .
git commit -m "deploy to gitpage"

git push -f git@github.com:your-repo.git master:gh-pages

cd -

3- إنشاء ملف .travis.yml في جذر المشروع واستخدم الكود التالي:

language: node_js
node_js:
  - "node"

cache: npm

script: npm run deploy

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
    branch: main

4- تحديث ملف package.json ليتضمن سكربت deploy:

"scripts": {
  "build": "vue-cli-service build",
  "deploy": "npm run build && cd ./dist && cp index.html 404.html"
  // ... السكربتات الأخرى ...
},

5- ارفع مشروعك إلى GitHub لتشغيل البناء، وانتظر بضع دقائق حتى يتم البناء.

الله يعطيك العافية بس في مشكلة لمه حط 

  publicPath: process.env.NODE_ENV === 'production'
عم يقلي انو 'process' is not defined 

يلزم اعمل import لشي معين

معا العلم انا استخدم Vuejs 3