🐿️

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

2022/05/11に公開

Nuxt

env

tech

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

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

どうやって解決した?

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

まずは、設定をする

buildModulesというワードを探す。
Macの人は、command + F
buildModuleを検索する
配列の中に設定を書く
.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

Vue2.x

日本語の記事

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