Как настроить переменные окружения с помощью vue-cli 3?

Question

Я пытаюсь использовать переменные окружения в vue-cli, но не работает, каждый раз говорит 'undefined' при использовании console.log(process.env.VUE_APP_BASE_URI). Но process.env.NODE_ENV говорит «разработка», как я определил в webpack.config.js.

Я прочитал документацию по vue-cli 3 и поместил мои .env. * Файлы в корневой проект. как это:

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/

Я использую .NET Core с Vue. Как использовать среду?

Answer 1

Вам необходимо переименовать файл только в .env вместо .env.production или .env.development. это должно работать, если нет, прокомментируйте ту же ветку.

Answer 2

Я не знаю, является ли это той же проблемой, что и у вас, но это случилось в моем случае:

• Я настроил все правильно, как вы (не любой файл .config.js)
• Затем я остановился и запустил dev-сервер с помощью npm run serve
• Когда я обновил страницу, в консоли ничего не изменилось

Затем я увидел, что команда npm run serve запустила сайт на другом порту! . Старая версия все еще работала, но давала старые значения. Когда я попробовал новый порт, значения были правильными.

Answer 3

это только что случилось со мной, решение очень простое. Просто перезапустите сервер разработки.

ctrl + c

тогда

npm run serve

Answer 4

Для этого могут быть разные способы, одним простым способом из командной строки будет:

npx vue-cli-service serve --mode production

По умолчанию development , если mode не был указан.