web-dev-qa-db-ja.com

Vue.jsでdotenvを使用する方法

環境変数をvueアプリに追加しようとしています。

ここに、私の.envファイルの内容を示します。これは、ルート（srcの外側）に配置されます。

VUE_APP_GOODREADS_KEY = my_key

main.jsの上にdot envのコードを追加しました

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import Vuetify from 'vuetify'

import dotenv from 'dotenv'

dotenv.config()

import { router } from './router'
import store from './store'

ストア内でこの変数を使用したい./store/index.js

Store.log環境変数をconsole.logにしようとしましたが、運はありませんでした：

console.log(process.env)

しかし、私が得ているのは

NODE_ENV:"development"

私が見つけた関連するスレッドは vue.jsに環境変数を読み込む だけでしたが、process.envで既存の変数を使用する方法についてのみ言及しています。 dotenvを使用して環境変数を追加します。このコードが機能しないのはなぜですか？

node.jsvue.jsvuejs2
6
Dani Vijay

_Vue CLI 3_を使用してプロジェクトが作成された場合、dotenvを使用して環境変数を取得する必要はありません。

プロジェクトの_.env_ファイル内で環境変数を取得するには：

  1. _.env_ファイルをプロジェクトルートに配置します。

  2. _.env_ファイルで、「VUE_APP_」プレフィックスを使用して環境変数を指定します。

    _VUE_APP_SOMEKEY=SOME_KEY_VALUE_。

  3. 最後に、アプリケーションコードで_process.env.*_を使用してそれらにアクセスできます。

    console.log(process.env.VUE_APP_SOMEKEY) // SOME_KEY_VALUE

参照： Vue CLI 3-環境変数とモード

28
white

等号の前後のスペースを削除してみてください。

VUE_APP_GOODREADS_KEY=my_key

また、次のようにデバッグしてみてください。

const config = dotenv.config()
if(config.error){
  console.log('Could not load env file', config.error)
}

リファレンス： https://github.com/motdotla/dotenv#config

1
Tudor Ilisoi

Vuejs 2を使用する場合、configフォルダーにあるdev.env.jsおよびprod.env.jsファイルを使用する必要があります。

Vuejs 2は.envファイルの使用をサポートしていませんが、 Vuejs 3はサポートしています 。

// /config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  SERVER_URI: "http://someremoteuri:3333/api/v1"
}

// /config/dev.env.js
'use strict'
module.exports = {
  NODE_ENV: '"development"',
  SERVER_URI: "http://localhost:3333/api/v1"
}
1
PrestonDocks