Vite開発環境変数設定

Viteで変数設定しよう。
まず開発と本番用の.envファイルを作成する。

.env.production

VITE_ACCESS_KEY="productionkey"

.env.local

VITE_ACCESS_KEY="devkey"

あと、dev mode追加する。

package.json

{
    "scripts": {
    "dev": "vite --mode dev",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

検証用のconsole.log追加する。

App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

function App() {
  console.log(import.meta.env.VITE_ACCESS_KEY) 
  return (
    <div className="App">
    </div>
  )
}

export default App

production結果

本番用のpublicファイル作成のために、buildする。
あと、previewに検証する。

yarn build  
yarn preview

dev結果

開発環境検証する。

yarn dev