web-dev-qa-db-ja.com

Vue.jsで環境変数を使用する

私は公式ドキュメントを読んでいますが、環境変数については何も見つかりません。環境変数をサポートするコミュニティプロジェクトがいくつかあるようですが、これは私にとってやり過ぎかもしれません。だから、Vue CLIで既に作成されたプロジェクトで作業しているときに、ネイティブで機能する簡単な特別なものがあるのではないかと思っていました。

たとえば、次の操作を実行すると、適切な環境が印刷され、これが既にセットアップされていることを意味することがわかります。

mounted() {
  console.log(process.env.ROOT_API)
}

私はちょっと環境変数とノードに新しいです。

参考までにVue 3.0ベータ版を使用しています。

node.jsvue.jsenvironment-variablesvue-cli
21
Edgar Quintero

vue cliをWebpackテンプレート（デフォルトの構成）で使用する場合、環境変数を作成して.envファイルに追加できます。

変数は、プロジェクトのprocess.env.variableNameで自動的にアクセス可能になります。ロードされた変数は、すべてのvue-cli-serviceコマンド、プラグイン、および依存関係でも使用できます。

いくつかのオプションがあります。これは 環境変数とモードのドキュメント にあります：

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

.envファイルは次のようになります。

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

.envファイルを作成して変数を追加するだけで準備完了です。 :)

以下のコメントに記載されているとおり： Vue cli 3を使用している場合、VUE_APP _で始まる変数のみがロードされます。

現在実行中の場合は、再起動することを忘れないでくださいserve。

32
RAH

Vue cli 3を使用している場合、VUE_APP_で始まる変数のみがロードされます。

ルートで、次を使用して.envファイルを作成します。

VUE_APP_ENV_VARIABLE=value

これにより、プロジェクト（.jsおよび.vueファイル）でprocess.env.VUE_APP_ENV_VARIABLEを使用できるようになります。

更新

@ ALi6pによれば、Vue Cli 3では、dotenv依存関係をインストールする必要はありません。

24
Pedro Silva
  1. ルートフォルダーに2つのファイルを作成します（package.jsonの近く）.envおよび.env.production
  2. プレフィックスVUE_APP_を使用して変数をこれらのファイルに追加します。例：VUE_APP_WHATEVERYOUWANT
  3. serveは.envを使用し、buildは.env.productionを使用します
  4. コンポーネント（vueまたはjs）で、process.env.VUE_APP_WHATEVERYOUWANTを使用してvalueを呼び出します
  5. 現在実行中の場合は、再起動することを忘れないでくださいserve
  6. ブラウザのキャッシュをクリア

vue-cliバージョン3以降を使用していることを確認してください

詳細： https://cli.vuejs.org/guide/mode-and-env.html

12
ali6p

プロジェクトのルートで環境ファイルを作成します。

  • .env
  • .env.someEnvironment1
  • .env.SomeEnvironment2

これらの構成をロードするには、modeで環境を指定します。

npm run serve --mode development //default mode
npm run serve --mode someEnvironment1

envファイルでは、設定をキーと値のペアとして宣言するだけですが、vue 3を使用している場合は、mustVUE_APP_のプレフィックス：

あなたの。env：

VUE_APP_TITLE=This will get overwritten if more specific available

。env.someEnvironment1：

VUE_APP_TITLE=My App (someEnvironment1)

これにより、次の方法で任意のコンポーネントでこれを使用できます。

myComponent.vue：

<template>
  <div> 
    {{title}}
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      title: process.env.VUE_APP_TITLE
    };
  }
};
</script>

modeなしでアプリを実行した場合、「これは取得します...」と表示されますが、modeとしてsomeEnvironment1を指定すると、そこからタイトルが取得されます。

.localをファイルに追加することで、gitから「隠された」構成を作成できます。.env.someEnvironment1.local-秘密がある場合に非常に便利です。

詳細については、 ドキュメント を参照してください。

6
benscabbia

私が遭遇した問題は、環境変数の構成フォルダーが含まれていないように見えたVueJSのwebpack-simpleインストールを使用していたでした。そのため、env.test、development、production.js構成ファイルを編集できませんでした。それらを作成しても助けにはなりませんでした。

他の答えは私にとって十分に詳細ではなかったので、webpack.config.jsを「いじりました」。そして、次はうまくいきました。

したがって、環境変数を機能させるには、webpack.config.jsの下部に次のものが必要です。

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

上記に基づいて、生産中、NODE_ENV変数を取得できます

mounted() {
  console.log(process.env.NODE_ENV)
}

これを行うにはもっと良い方法があるかもしれませんが、開発で環境変数を使用したい場合は、次のようなことをします。

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    })
  ]);

}

さて、他の変数を追加したい場合は、次のように簡単です：

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:3000"',
        FOO: "'BAR'"
      }
    })
  ]);
}

また、何らかの理由で "''"の二重引用符が必要であることに注意してください。

開発中、これらの環境変数にアクセスできるようになりました：

mounted() {
  console.log(process.env.ENDPOINT)
  console.log(process.env.FOO)
}

コンテキストのwebpack.config.js全体を以下に示します。

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

if (process.env.NODE_ENV === 'development') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        ENDPOINT: '"http://localhost:3000"',
        FOO: "'BAR'"
      }
    })
  ]);

}
4
Aaron McKeehan

これは、NODE_ENVをフロントエンドに公開できるようにvue.config.jsを編集した方法です（Vue-CLIを使用しています）。

vue.config.js

const webpack = require('webpack');

// options: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
module.exports = {
    // default baseUrl of '/' won't resolve properly when app js is being served from non-root location
    baseUrl: './',
    outputDir: 'dist',
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                // allow access to process.env from within the vue app
                'process.env': {
                    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
                }
            })
        ]
    }
};
0
drussell

Vue-cliバージョン3の場合：

.envファイルにはオプションがあります。.envを使用するか、次のいずれかを使用できます。

  • .env.test
  • .env.development
  • .env.production

.envの/^/の代わりに/^VUE_APP_/としてプレフィックスregexを使用することにより、カスタム/node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE変数を使用できます。

これは、.envファイルのテスト、開発、および制作などのさまざまなモードでオープンソースアプリを開発するためにはお勧めできません。 npm install ..を実行するたびに上書きされるためです。

0
cagcak

前の回答に加えて、sassのVUE_APP_ * env変数（vueコンポーネントのsassセクションまたはscssファイルのいずれか）にアクセスする場合は、次を追加できます。 vue.config.js（ない場合は作成する必要があります）：

let sav = "";
for (let e in process.env) {
    if (/VUE_APP_/i.test(e)) {
        sav += `$${e}: "${process.env[e]}";`;
    }
}

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: sav,
            },
        },
    },
}

文字列savは、処理前にすべてのsassファイルの先頭に追加されるようです。これは変数に適しています。この段階でミックスインをインポートして、各vueコンポーネントのsassセクションで使用できるようにすることもできます。

vueファイルのsassセクションでこれらの変数を使用できます。

<style lang="scss">
.MyDiv {
    margin: 1em 0 0 0;
    background-image: url($VUE_APP_CDN+"/MyImg.png");
}
</style>

または.scssファイル内：

.MyDiv {
    margin: 1em 0 0 0;
    background-image: url($VUE_APP_CDN+"/MyImg.png");
}

from https://www.matt-helps.com/post/expose-env-variables-vue-cli-sass/

0
Matt Parkins

Vue CLI 3およびwebpack-simple installを使用している場合、 Aaronの答え は私にとっては機能しましたが、webpack.config.jsに環境変数を追加することに熱心ではありませんでしたGitHubにコミットしたかったので。代わりに dotenv-webpack プラグインをインストールしました。これにより、.envを環境に追加することなく、プロジェクトのルートにあるVUE_APP_ファイルから環境変数を正常にロードできるように見えます。変数。

0
jamesbellnet