چگونه می توان به درستی میزبانی یک برنامه vue.js را در یک زیر مجموعه از public_html برگزار کرد

مقدمه

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

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

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

مشکل

به طور پیش فرض ، VUE فرض می کند که برنامه شما در ریشه یک دامنه میزبانی خواهد شد (به عنوان مثال ، https://yourdomain.com/). اما وقتی آن را در زیر مجموعه ای مانند https://yourdomain.com/subdirectory/ مستقر می کنید ، ممکن است شکسته شود زیرا مسیرهای دارایی و مسیرها به درستی تنظیم نشده است.

ممکن است خطاهایی مانند:

1. یک صفحه خالی هنگام بازدید از Subdirectory
2. دارایی های گمشده (CSS و فایل های JavaScript بارگیری نمی شوند)
3. روتر VUE به درستی کار نمی کند

بیایید قدم به قدم برویم تا این مسائل را برطرف کنیم.

مرحله 1: مسیر پایه صحیح را در پرونده های پیکربندی تنظیم کنید

بسته به اینکه از Vite یا Vue CLI استفاده می کنید ، باید Vite.config.js یا vue.config.js را پیکربندی کنید.

برای vite (vite.config.js)

پرونده vite.config.js را در ریشه پروژه VUE خود ویرایش کنید و گزینه پایه صحیح را مشخص کنید:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  base: '/subdirectory/', // Change 'subdirectory' to match your subdirectory name
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
});

برای vue cli (vue.config.js)

اگر به جای Vite از Vue CLI استفاده می کنید ، vue.config.js را ایجاد یا ویرایش کنید:

module.exports = {
  publicPath: '/subdirectory/', // Change 'subdirectory' to match your subdirectory name
};

این تضمین می کند که تمام URL های دارایی نسبت به زیر مجموعه های شما تولید می شوند.

مرحله 2: پیکربندی روتر VUE (در صورت استفاده)

اگر پروژه شما از Vue Router استفاده می کند ، گزینه پایه را به روز کنید تا با زیر مجموعه خود مطابقت داشته باشد:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const router = createRouter({
  history: createWebHistory('/subdirectory/'), // Ensure this matches your subdirectory
  routes: [
    { path: "https://dev.to/", component: Home },
    // other routes
  ],
});

export default router;

این امر اطمینان می دهد که روتر می داند که برنامه شما در حال اجرا نیست ، بلکه در / /subdirectory /.

مرحله 3: برای مسیریابی مناسب .htaccess را تنظیم کنید

اگر از Apache استفاده می کنید ، باید یک پرونده .htaccess را در داخل پوشه خود تنظیم کنید تا به درستی حالت تاریخ VUE را اداره کنید. پرونده ای به نام .htaccess ایجاد کنید و این را اضافه کنید:

  RewriteEngine On
  RewriteBase /subdirectory/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /subdirectory/index.html [L]

این تضمین می کند که همه درخواست ها به index.html می روند و به Vue روتر اجازه می دهد تا ناوبری را کنترل کند.

مرحله 4: برنامه خود را بسازید و مستقر کنید

اکنون که همه چیز پیکربندی شده است ، برنامه VUE خود را بسازید:

برای دانستن:

vite build

برای VUE CLI:

npm run build

این یک پوشه Dist با پرونده های آماده تولید شما ایجاد می کند. محتویات پوشه DIST را در Public_html/ Subdirectory/ با استفاده از FTP یا مدیر فایل میزبان خود بارگذاری کنید.

نکته مهم: خود پوشه Dist را بارگذاری نکنید – پرونده ها را در داخل آن بارگذاری کنید.

مرحله 5: حافظه پنهان و تست را پاک کنید

پس از استقرار ، حافظه نهان مرورگر خود را پاک کنید یا سایت را در یک پنجره ناشناس باز کنید تا مطمئن شوید که همه چیز به درستی بارگیری می شود. اگر هنوز مشکلات را مشاهده می کنید ، کنسول مرورگر (F12> کنسول) و برگه شبکه را بررسی کنید تا ببینید آیا هیچ دارایی در بارگیری آن ناکام است یا خیر.

پایان

میزبانی یک برنامه vue.js در یک زیر مجموعه از public_html نیاز به پیکربندی مناسب مسیر پایه ، روتر VUE و تنظیمات سرور دارد. با رعایت این مراحل ، برنامه شما اکنون باید به طور صحیح تحت https://yourdomain.com/subdirectory/ بارگیری شود.

اگر به مشکلی رسیدید ، Vite.config.js یا vue.config.js ، تنظیمات روتر و پرونده .htaccess خود را دوبار بررسی کنید. برنامه نویسی مبارک!