{"id":14745,"date":"2025-03-10T08:00:16","date_gmt":"2025-03-10T05:00:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamanizi-public_html-alt-dizininde-barindirma\/"},"modified":"2025-03-10T08:00:16","modified_gmt":"2025-03-10T05:00:16","slug":"vue-js-uygulamanizi-public_html-alt-dizininde-barindirma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamanizi-public_html-alt-dizininde-barindirma\/","title":{"rendered":"Vue.js Uygulaman\u0131z\u0131 public_html Alt Dizininde Bar\u0131nd\u0131rma"},"content":{"rendered":"

<\/p>\n

Vue.js Uygulaman\u0131z\u0131 public_html Alt Dizininde Bar\u0131nd\u0131rma<\/p>\n

Merhaba! Fatih Soysal burada. Bu yaz\u0131da, Vue.js uygulaman\u0131z\u0131 sunucunuzun public_html<\/code> dizininin alt dizininde nas\u0131l do\u011fru \u015fekilde bar\u0131nd\u0131raca\u011f\u0131n\u0131z\u0131 detayl\u0131 olarak a\u00e7\u0131klayaca\u011f\u0131m. Bu, \u00f6zellikle alt dizinlerde bar\u0131nd\u0131r\u0131lan uygulamalar i\u00e7in s\u0131k kar\u015f\u0131la\u015f\u0131lan sorunlar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r. \u00d6rne\u011fin, www.orneksite.com\/uygulama<\/code> gibi bir adrese sahip bir uygulaman\u0131z varsa, bu rehber size yol g\u00f6sterecektir.<\/p>\n

Haz\u0131rl\u0131k A\u015famas\u0131<\/h2>\n

\u00d6ncelikle, Vue.js projenizin haz\u0131r oldu\u011fundan emin olun. npm run build<\/code> komutuyla \u00fcretim i\u00e7in derleme i\u015flemini ger\u00e7ekle\u015ftirin. Bu i\u015flem, dist<\/code> klas\u00f6r\u00fcnde statik dosyalar\u0131n\u0131z\u0131 olu\u015fturur. Ard\u0131ndan, bu dist<\/code> klas\u00f6r\u00fcndeki i\u00e7eri\u011fi, sunucunuzdaki public_html<\/code> dizininin alt\u0131na olu\u015fturaca\u011f\u0131n\u0131z bir dizine (\u00f6rne\u011fin, uygulama<\/code>) kopyalay\u0131n.<\/p>\n

Router ve Base URL Ayar\u0131<\/h2>\n

Vue Router kullan\u0131yorsan\u0131z, uygulaman\u0131z\u0131n alt dizinde do\u011fru \u015fekilde \u00e7al\u0131\u015fmas\u0131 i\u00e7in base URL<\/code>‘sini ayarlaman\u0131z gerekmektedir. Bunun i\u00e7in, Vue uygulaman\u0131z\u0131n ana dosyas\u0131nda (genellikle main.js<\/code>) a\u015fa\u011f\u0131daki gibi bir ayar yapman\u0131z gerekir:<\/p>\n

\nimport { createRouter, createWebHistory } from 'vue-router';\nimport App from '.\/App.vue';\n\nconst router = createRouter({\n  history: createWebHistory('\/uygulama\/'), \/\/ Buraya alt dizin yolunu ekleyin\n  routes: [\n    \/\/ ... rotalar\u0131n\u0131z\n  ]\n});\n\ncreateApp(App).use(router).mount('#app');\n<\/code><\/pre>\n
Yukar\u0131daki kodda, \/uygulama\/<\/code> k\u0131sm\u0131n\u0131, uygulaman\u0131z\u0131n bulundu\u011fu alt dizinin yoluna g\u00f6re de\u011fi\u015ftirmeniz \u00f6nemlidir.  Bu ayar, Vue Router’\u0131n do\u011fru URL’leri olu\u015fturmas\u0131n\u0131 sa\u011flar.  \u00d6rne\u011fin;  uygulaman\u0131z \/uygulama\/hakkimizda<\/code> yoluna sahip bir sayfaya y\u00f6nlendiriliyorsa,  bu ayar do\u011fru URL’leri olu\u015fturmay\u0131 garanti eder.  Aksi takdirde,  404 hatas\u0131 alabilirsiniz.  Bu i\u015flem, uygulaman\u0131z\u0131n do\u011fru \u015fekilde \u00e7al\u0131\u015fmas\u0131 i\u00e7in olduk\u00e7a kritik bir ad\u0131md\u0131r. <\/p>\n
Apache veya Nginx Y\u00f6nlendirmeleri (Gerekirse)<\/h2>\n
Baz\u0131 durumlarda, sunucu ayarlar\u0131n\u0131z\u0131 da d\u00fczenlemeniz gerekebilir.  \u00d6zellikle,  index.html<\/code> dosyas\u0131n\u0131n do\u011fru \u015fekilde sunulmas\u0131n\u0131 sa\u011flamak i\u00e7in  Apache veya Nginx sunucular\u0131n\u0131zda  .htaccess<\/code> dosyas\u0131 (Apache) veya sunucu yap\u0131land\u0131rma dosyas\u0131 (Nginx) \u00fczerinden y\u00f6nlendirme kurallar\u0131 eklemeniz faydal\u0131 olabilir. <\/p>\n
Apache i\u00e7in .htaccess \u00f6rne\u011fi:<\/strong><\/p>\n
\n<IfModule mod_rewrite.c>\n  RewriteEngine On\n  RewriteBase \/uygulama\/\n  RewriteRule ^index\\.html$ - [L]\n  RewriteCond %{REQUEST_FILENAME} !-f\n  RewriteCond %{REQUEST_FILENAME} !-d\n  RewriteRule . \/uygulama\/index.html [L]\n<\/IfModule>\n<\/code><\/pre>\n
Bu kurallar,  \/uygulama\/<\/code> alt dizinindeki istekleri index.html<\/code> dosyas\u0131na y\u00f6nlendirir.  E\u011fer sunucunuz Nginx kullan\u0131yorsa,  benzer bir yap\u0131land\u0131rma dosya ayarlar\u0131 ile yap\u0131labilir.  Bu ayarlar, sunucunuza ve yap\u0131land\u0131rman\u0131za g\u00f6re de\u011fi\u015fiklik g\u00f6sterebilir.<\/p>\n
Olas\u0131 Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h2>\n
Uygulaman\u0131z\u0131 bar\u0131nd\u0131r\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 sorunlar ve \u00e7\u00f6z\u00fcmler \u015funlard\u0131r:<\/p>\n