web-dev-qa-db-ja.com

vue-cli 3で環境変数を設定する方法は？

vue-cliで環境変数を使用しようとしましたが、動作していません。console.log(process.env.VUE_APP_BASE_URI)を使用すると、常に「未定義」と表示されます。しかし、process.env.NODE_ENVは、webpack.config.jsで定義したとおり、「開発」と言います。

Vue-cli 3のドキュメントを読み、.env。*ファイルをルートプロジェクトに配置します。このような： - enter image description here

Webpack.config.js

    module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: ['babel-polyfill', './App/index.js']
  },
  plugins:[
    new VueLoaderPlugin()
  ],

。env.development

VUE_APP_BASE_URI=http://localhost:64208/api/

。env.production

VUE_APP_BASE_URI=http://localhost:64208/api/

Vueで.NET Coreを使用しています。環境の使い方は？

vue.jsenvironment-variablesvue-cli-3
11
Isaías Orozco Toledo

それはちょうど私に起こった、解決策は非常に簡単です。開発サーバーを再起動するだけです。

ctrl + c

それから

npm run serve
4
Bagaskara

ファイルの名前は、.envまたは.env.productionではなく.env.developmentのみに変更する必要があります。動作しない場合は、同じスレッドでコメントする必要があります。

1
Ajay Kumar

これがあなたと同じ問題であるかどうかはわかりませんが、これは私の場合に起こりました：

  • 私はあなたがしたようにすべてを正しく設定しました（.config.jsファイルではありません）
  • その後、停止し、npm run serveでdev-serverを開始します
  • ページを更新すると、コンソールで何も変更されませんでした

次に、npm run serveコマンドサイトを別のポートで開始した！を確認しました。古いバージョンはまだ実行されていましたが、古い値が与えられました。新しいポートを試してみたところ、値が正しい場合。

0
andreasnico

これを実現するにはさまざまな方法がありますが、コマンドラインから簡単に実行できる方法の1つは次のとおりです。

npx vue-cli-service serve --mode production

modeが指定されていない場合、デフォルトはdevelopmentになります。

0
Chuan