facebook twitter hatena line email

「Javascript/nuxtjs/env」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(.envで環境変数を設定する方法)
 
(同じ利用者による、間の2版が非表示)
行28: 行28:
 
</pre>
 
</pre>
  
 
+
pages/index.vue
 
+
<pre>
 +
<template>
 +
    {{apikey}}
 +
</template>
 +
<script>
 +
export default {
 +
  name: 'app',
 +
  data() {
 +
    return {
 +
      apikey: process.env.API_KEY
 +
    }
 +
  },
 +
}
 +
</pre>
  
 
==参考==
 
==参考==
 
https://qiita.com/fj_yohei/items/c77bff6f0177b4ff219e
 
https://qiita.com/fj_yohei/items/c77bff6f0177b4ff219e

2021年6月30日 (水) 15:27時点における最新版

.envで環境変数を設定する方法

インストール

$ npm install @nuxtjs/dotenv

インストール確認

package.jsonにdotenvがあることを確認

 "dependencies": {
   "@nuxtjs/dotenv": "^1.4.1",
 }

サンプル

.env

API_KEY=hogekey

nuxt.config.js

以下2行を追加

+ require('dotenv').config();
+ const {API_KEY} = process.env;
export default {
略
build: {
},
env: {
  API_KEY
}

pages/index.vue

<template>
    {{apikey}}
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      apikey: process.env.API_KEY
    }
  },
}

参考

https://qiita.com/fj_yohei/items/c77bff6f0177b4ff219e