🐿️

Nuxt2で.envの設定がわからない?

2022/05/11に公開約1,400字

公式のドキュメントを読んだがなんか違う気がする
公式のリンク

https://nuxtjs.org/ja/docs/directory-structure/nuxt-config#env-サポート

難しいな?、どうすれば設定できる?

どうやって解決した?

こちらの記事を参考にしてみた

https://qiita.com/higa02/items/046aafca1969cfa4d607

まずは、設定をする

  1. buildModulesというワードを探す。
  2. Macの人は、command + F
  3. buildModuleを検索する
  4. 配列の中に設定を書く
  5. .envファイルをプロジェクトディレクトリに作成
touch .env

テストなので、文字は仮のもので良いです。本来は、APIKEYを書く

.env

VUE_APP_TEST ="/^TEST:CODE@*/"

nuxt.cofig.js

buildModules: [
	// https://go.nuxtjs.dev/eslint
	'@nuxtjs/eslint-module',
	'@nuxtjs/dotenv', // .envの設定を追加する
	'@nuxtjs/vuetify',

	['@nuxtjs/vuetify', { /* module options */ }]
],

どこでも良いのでcreatedメソッドの中にconsole.logを書いてデバッグをする
createdとは?
公式ドキュメント
Nuxt.js

https://nuxtjs.org/ja/docs/concepts/nuxt-lifecycle#サーバー

Vue2.x

https://jp.vuejs.org/v2/guide/instance.html

日本語の記事

https://reffect.co.jp/vue/vue-js-created-mounted-diffrence

index.vue

<script>
export default {
  name: 'IndexPage',
  created () {
    // eslint-disable-next-line no-console
    console.log(process.env.VUE_APP_TEST)
  }
}
</script>

簡易サーバーを起動する

npm run dev

GoogleChromeDeveloperToolsでコンソールを見て、デバッグをする。

読み込めていたら、OKです。

つまずいたところ!

Vue.jsと設定の仕方が違う?
Vue.jsだと最初から、.env入っている。
Nuxt.jsだとnpmのパッケージが必要!!!

Discussion

ログインするとコメントできます