티스토리 뷰

개발/TIL

Vite에서 HTML Injecting 하는 법

윤준수 2022. 4. 11. 21:18

Vite 사용 중에 Webpack처럼 title을 어떠한 변수나 환경변수에서 가져와서 컴파일 하는 것을 원하시는 분을 위한 기능입니다.

 

vite-plugin-html이라는 라이브러리에서 injecting을 지원합니다. env에서 가져와서 이런식으로 집어넣을 수 있습니다.

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html';
import react from '@vitejs/plugin-react'

const env = loadEnv(mode, process.cwd())

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: env.VITE_TITLE
        }
      }
    })
  ]
})
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
   </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

HTML 파일에는 EJS 문법으로 써주면 됩니다. <%= title => 이것 처럼요.

반응형

'개발 > TIL' 카테고리의 다른 글

backdrop-filter가 사파리에서 작동 안해요!!  (0) 2022.09.18
Parallax Scrolling 패럴럭스 스크롤링 혹은 비디오 스크롤링 하면서 생기는 영상의 렉을 없애보자  (0) 2022.08.12
Node.js의 대체자? Bun을 알아보자  (0) 2022.07.27
CSS로 폰트 안티앨리어싱 넣기  (0) 2022.05.25
파이썬으로 (PyInstaller) 컴파일 된 EXE 바이너리 디컴파일 하는 법  (2) 2022.04.07
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함