หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

VITE + SVELTE + VITE-PLUGIN-SSR PRERENDER PRERTER PROJECT!

โมดูล Vite-Plugin-SSR เวอร์ชัน svelte

โมดูลนี้แสดงให้เห็นถึงการทำ HTML ที่ได้รับการรับรองอย่างสมบูรณ์ด้วยการตั้งค่าความชุ่มชื้นที่ถูกต้องเพื่อให้แอปของคุณโหลดได้อย่างราบรื่นในทุกบริบท

คุณสามารถลองได้ที่นี่: https://ryanweal.github.io/vite-plugin-ssr-svelte/

ทำไมไม่ใช้ sveltekit? การใช้ vite-plugin-ssr คุณสามารถแทนที่ทุกอย่างได้ค่อนข้างมาก และ คุณยังสามารถเพิ่มเฟรมเวิร์กอื่น ๆ ได้ (เช่น Vue, React, อื่น ๆ ) สำหรับเส้นทางที่เฉพาะเจาะจงโดยให้ไฟล์ page.client.js และ page.server.js

อะไรทำงานนอกกรอบ

repo นี้สามารถใช้เป็นผู้เริ่มต้นสำหรับโครงการต่อไปของคุณ เป็นการตั้งค่าให้ทำงานตามกรอบงานทั่วไป:

  • สร้างหน้าและส่วนประกอบโดยใช้ svelte ด้วยการโหลดซ้ำใน dev
  • PRERENDER เนื้อหาทั้งหมดในช่วงเวลาที่สร้าง
  • ให้ความชุ่มชื้นกับเนื้อหาที่มี perendered กับ js ฝั่งไคลเอ็นต์ใด ๆ
  • Metatags สามารถตั้งค่าได้อย่างง่ายดายโดยใช้องค์ประกอบตัวอย่าง
  • โฟลเดอร์สินทรัพย์ที่คัดลอกตรงไปยังโฟลเดอร์สร้างเพื่อให้คุณสามารถอ้างอิงภาพเช่นปี 1999 และไม่ต้องกังวลเกี่ยวกับการนำเข้า

นอกจากนี้เรายังรวมตัวอย่างบางส่วนของการโทร API บนฝั่งเซิร์ฟเวอร์เท่านั้นเพื่อดึงข้อมูลของคุณ

ใช้ปลั๊กอิน VITE

  • Vite-Plugin-SSR
  • Vite-Plugin-Svelte
  • Express.js (ใช้สำหรับกระบวนการ prerendering)

ติดตั้งและเรียกใช้

  1. โคลนที่เก็บนี้
  2. ติดตั้งการพึ่งพา: npm i
  3. เรียกใช้: npm run dev และเพลิดเพลินไปกับการโหลดซ้ำในขณะที่คุณทำงาน
  4. เยี่ยมชม http://localhost:3000 ในเบราว์เซอร์ของคุณ
  5. สร้างมัน: npm run build
  6. ให้บริการ: npx serve dist/client

การอัปเดต

ในการอัปเดตแพ็คเกจนี้คุณสามารถทำตามขั้นตอนการอัปเดต NPM ปกติ

เราได้ใช้คำสั่ง npm shrinkwrap ในตัวเพื่อให้ npm-shrinkwrap.json มากกว่า package-lock.json ปกติซึ่งช่วยให้ repo นี้คงที่ที่สถานะ "ดีรู้จัก" หากคุณใช้ npm เป็นผู้ติดตั้งของคุณ

ตรวจสอบให้แน่ใจว่าได้ทดสอบการอัปเดตอย่างเต็มที่หากคุณทำการเปลี่ยนแปลงไฟล์ npm-shrinkwrap.json ของคุณ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด