zola vite demo

Zola + Vite 데모

이것은 특별한 플러그인 없이 Vite와 Zola를 깔끔하게 연결할 수 있는 방법을 보여주는 최소한의 작업 데모입니다.

• Zola는 Jinja2/Twig와 유사한 구문으로 Tera 템플릿 엔진을 사용하는 간단하고 영리한 정적 사이트 생성기입니다.
• Vite는 Webpack과 유사하지만 구성이 더 쉬운 프런트엔드 빌드 도구입니다.

이것은 시작 프로젝트나 상용구가 아니라는 점에 유의하세요.

이 데모에서는:

• Zola는 HTML 처리를 담당하고 Vite는 JS 및 SASS 처리를 담당합니다. Vite 대신 SASS를 처리하기 위해 Zola를 선호한다면 이를 구성하는 것이 쉽습니다(Zola 문서 및 main.js의 내 설명 참조).
• Zola 및 Vite 개발 서버는 함께 실행됩니다.
• 핫 리로드는 HTML, JS, SASS 코드에서 작동합니다.
• 명령은 npm run 통해 사용할 수 있습니다(package.json 참조).
• 프로덕션 빌드가 축소됩니다. Zola는 HTML을 축소하고 Vite는 JS 및 CSS를 축소합니다.

사용방법

1. 저장소를 복제하고 디렉터리에 cd 넣으세요.
2. npm install 실행하여 종속성을 설치합니다.
3. npm run dev 실행하여 Zola 및 Vite 개발 서버를 실행하세요.
4. 브라우저에서 http://127.0.0.1:1111/을 엽니다. "Zola + Vite 데모에 오신 것을 환영합니다"라는 페이지와 Hello world! 가 표시되어야 합니다. 브라우저 콘솔에서(위 스크린샷처럼)
5. templates/index.html OR js/main.js OR sass/main.scss 를 일부 변경하세요. http://127.0.0.1:1111/ 페이지는 변경 사항이 반영되어 즉시 업데이트되어야 합니다.
6. 프로덕션 용도로 빌드하려면 npm run build 실행하세요(파일은 public/ 디렉터리로 이동됩니다).

알려진 문제

1. Windows에서는 데모를 테스트하지 않았습니다.
2. Vite 문서에서는 해당 항목에 import 'vite/modulepreload-polyfill' 포함해야 한다고 나와 있지만 그 목적에 대해서는 잘 모르겠습니다(main.js 참조).
3. http://localhost:3000/@vite/client가 404를 제공하는 경우 먼저 http://127.0.0.1:1111/을 열어야 합니다. 그래도 작동하지 않으면 이것을 참조하십시오.

제안, 질문이 있으신가요?

문제를 열면 됩니다. 이 저장소의 목적과 관련되지 않은 문제는 종료된 것으로 표시됩니다.