เมื่อคุณตั้งค่า Nginx เพื่อให้ทำงานร่วมกับ Vue.js และต้องการจัดการหน้า 404 Not Found ใน Nginx คุณสามารถทำการตั้งค่าใน Nginx ให้เรียกหน้า 404 จาก Vue.js เว็บแอปพลิเคชันของคุณได้. นี่คือวิธีการตั้งค่า:
เรียกใช้งาน Nginx:
ติดตั้ง Nginx บนเซิร์ฟเวอร์ของคุณ (หากยังไม่ได้ติดตั้ง) และเริ่มให้ Nginx ทำงาน:
1
sudo service nginx start
สร้างไฟล์การตั้งค่าสำหรับเว็บแอป:
สร้างไฟล์การตั้งค่าสำหรับเว็บแอปของคุณใน Nginx. ตัวอย่างไฟล์การตั้งค่าเช่น
myapp.conf:1
2
3
4
5
6
7
8
9
10
11server {
listen 80;
server_name example.com; # เปลี่ยนเป็นชื่อโดเมนของคุณ
location / {
root /path/to/your/vue/app; # เปลี่ยนเป็นพาธถึงโฟลเดอร์ที่เก็บแอป Vue.js
try_files $uri $uri/ /index.html; # สร้างลิงก์ไปยัง index.html สำหรับการจัดการหน้า 404 โดย Vue.js
}
# คอนฟิกอื่น ๆ ตามความต้องการ
}ในการตั้งค่านี้
try_filesจะพยายามค้นหาไฟล์ในเซิร์ฟเวอร์ และหากไม่พบไฟล์จะส่งคำขอไปยังindex.htmlซึ่งเป็นไฟล์หลักของแอป Vue.js.บันทึกการตั้งค่าและโหลดการตั้งค่าใหม่:
บันทึกไฟล์การตั้งค่า Nginx และโหลดการตั้งค่าใหม่:
1
sudo nginx -t
รีโหลด Nginx:
หลังจากตรวจสอบว่าไม่มีข้อผิดพลาดในการตั้งค่า Nginx ให้รีโหลด Nginx เพื่อให้การตั้งค่าใหม่เป็นผลให้ Nginx ทำงาน:
1
sudo service nginx reload
นี่คือวิธีการตั้งค่า Nginx เพื่อให้มันจัดการหน้า 404 Not Found โดยส่งคำขอไปยังแอป Vue.js เมื่อไม่พบไฟล์ในเซิร์ฟเวอร์ การตั้งค่านี้จะช่วยให้คุณสามารถใช้ Vue Router ในการจัดการเส้นทางและการนำทางในแอป Vue.js ของคุณโดยไม่มีปัญหา.