เรียกใช้ yarn serve:dev ซึ่งจะ ให้บริการ src โดยมี index.html เป็นจุดเริ่มต้นของคุณ
ในเทอร์มินอลที่สองให้รัน yarn watch การดำเนินการนี้จะดูไฟล์ทั้งหมดภายใน src/ และรู้ว่าต้องคอมไพ app.css ใหม่ด้วยสไตล์ tailwind ใหม่ที่เพิ่มเข้ามาระหว่างทาง
หมายเหตุ: อาจเกิดความล่าช้าเล็กน้อยก่อนที่คุณจะกดรีเฟรช... "เฮ้ นี่ไม่ใช่แอป React ที่หรูหรา KISS และเพียงแค่กดปุ่มรีเฟรช"
dev โดยไม่ต้องดูการรัน yarn compile:css:devดังนั้นคุณต้องการปรับใช้สิ่งนี้จริง ๆ ...
รัน yarn build:all to do "ทุกสิ่ง" ซึ่งจะคัดลอกไฟล์ *.html ทั้งหมดไปยังไดเร็กทอรี /build และคอมไพล์ app.css ด้วย NODE_ENV=production ซึ่งจะเป็นการบอกให้ Tailwind ใช้ตัวเลือก purge ที่กำหนดไว้ล่วงหน้าจาก tailwind.config.js
คัดลอกไดเร็กทอรี /build นี้ไปยังไซต์โฮสติ้งแบบคงที่ใดๆ... หรือบอกให้ไซต์โฮสติ้งแบบคงที่ของคุณใช้ /build/index.html เป็นจุดเริ่มต้น
หมายเหตุ: หลังจากสร้างเสร็จแล้ว คุณอาจให้บริการงานสร้างนี้ในพื้นที่ได้เช่นกันเพื่อดูว่า "prod" จะมีลักษณะอย่างไรหากใช้
yarn serve:prodสิ่งนี้จะให้บริการไดเร็กทอรีbuildแทนsrcสำหรับการดูด้วยโค้ดที่คอมไพล์ใหม่
ฉันจะสร้าง URL ที่สะอาดไปยังหน้าใหม่ได้อย่างไร เพิ่มไฟล์ vercel.json ที่กำหนด routes แล้วปล่อยให้ Vercel จัดการส่วนที่เหลือ
{
"version": 2,
"routes": [
{"src": "/about", "dest": "/about.html"}
]
}
สำหรับรายละเอียดเพิ่มเติม โปรดดูเอกสารของพวกเขาที่นี่
นั่นคือทั้งหมด... ใส่ HTML แบบคงที่ ลิงก์ index.css และสนุกไปกับมัน
การเชื่อมโยง Repo และการตั้งค่า
การแสดงตัวอย่างการปรับใช้
เสร็จแล้ว!