What

Rails + Vue.jsという構成のアプリにおいて、JavaScript (.jsや.vue) でも環境変数を使えるようにする。

Solution

Rails側で.env以下に環境変数をまとめていることを前提に記述します。

.envファイル

API_KEY=jofdashouhaemfaspo3u9fasnifgfa98

まず、yarnでdotenvをアプリに追加します。

$ yarn add dotenv

次に、config/webpack/development.js や config/webpack/production.jsに以下を追記します (一番上に追記しました)。

require('dotenv').config()

あとは使いたい.vueファイルで以下のようにして、呼び出します。

const { API_KEY } = process.env
console.warn(API_KEY)