Nuxt3 ちょっとだけハンズオンした備忘
Nux3をちょろっとだけ触ったため、その備忘を雑にまとめておく。
（余談だがこのブログはNuxt2で構築している）
プロジェクト作成
以下に記載の通り実行すれば特に問題なく進む。
$ cd path/to
$ git init
$ npx nuxi init app
$ npm run dev -- -o
-oオプションは、 標準ブラウザにて、起動したローカル環境のURLを自動で開いてくれるオプション。これがお節介だと感じるならば、普通にnpm run devで起動すれば良い。appは 任意のアプリケーション名。ここに入力した名前でディレクトリが作成され、その中に一式インストールされる。
nuxt.config.ts
以下のドキュメントに利用可能なプロパティの記載がある。
process.env.NODE_ENV 直アクセスはNG
Nuxt2 でもそうだったが、 .env に定義した変数にアクセスする際には nuxt.config.ts 経由 の runtimeConfig 経由でアクセスするのが正しい。
.env
NODE_ENV=natural
EXAMPLE=env-is-Natural
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
runtimeConfig: {
EXAMPLE: process.env.EXAMPLE,
public: {
EXAMPLE: process.env.EXAMPLE,
NODE_ENV: process.env.NODE_ENV
}
}
})
app.vue
<script setup>
const runtimeConfig = useRuntimeConfig()
console.log('[1]runtimeConfig.public.EXAMPLE is ' + runtimeConfig.public.EXAMPLE)
console.log('[2]runtimeConfig.EXAMPLE is ' + runtimeConfig.EXAMPLE )
console.log('[3]runtimeConfig.NODE_ENV is ' + runtimeConfig.NODE_ENV )
console.log('[4]process.env.EXAMPLE is ' + process.env.EXAMPLE )
console.log('[5]process.env.NODE_ENV is ' + process.env.NODE_ENV )
</script>
<template>
<div>
<NuxtWelcome />
</div>
</template>
- [1], [2], [3]
- (npm run dev) ターミナル と Developer tools console の両方に .env で定義した値が出力される
- (npm run build / generate) 正しく出力される
- [4], [5]
- (npm run dev時) npm run dev 時には ターミナルには設定した値が出力される
- (npm run dev時) Developer tools console では出力されない
- (npm run build / generate) [5] は ビルドエラーになる