「Javascript/nuxtjs/env」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→.envで環境変数を設定する方法) |
|||
| (同じ利用者による、間の3版が非表示) | |||
| 行1: | 行1: | ||
| − | + | =.envで環境変数を設定する方法= | |
| − | + | ==インストール== | |
$ npm install @nuxtjs/dotenv | $ npm install @nuxtjs/dotenv | ||
| − | + | ==インストール確認== | |
package.jsonにdotenvがあることを確認 | package.jsonにdotenvがあることを確認 | ||
"dependencies": { | "dependencies": { | ||
| 行9: | 行9: | ||
} | } | ||
| − | === | + | ==サンプル== |
| + | .env | ||
| + | API_KEY=hogekey | ||
| + | |||
| + | nuxt.config.js | ||
| + | |||
| + | 以下２行を追加 | ||
| + | <pre> | ||
| + | + require('dotenv').config(); | ||
| + | + const {API_KEY} = process.env; | ||
| + | export default { | ||
| + | 略 | ||
| + | build: { | ||
| + | }, | ||
| + | env: { | ||
| + | API_KEY | ||
| + | } | ||
| + | </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
以下２行を追加
+ 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
}
},
}
