Различные файлы среды для производства и разработки в приложении vue + webpack

Question

Я создаю приложение VUE с помощью веб-пакета. Теперь, когда мне нужно развернуть приложение на рабочем сервере, я чувствую необходимость иметь разные настройки для случаев разработки и производства (например, основной URL-адрес, где приложение должно достигать изменений API-сервисов для каждого типа). После прочтения некоторых руководств я еще не ясно, как этого добиться.

То, что я хотел бы сделать, это когда я запускаю:

npm run dev

переменные окружения в development.env должны использоваться, и когда я запускаю:

npm run build

должны использоваться переменные окружения в production.env.

Возможно ли это сделать с помощью веб-пакета?

Приветствие.

Answer 1

вы можете использовать webpack-cli, а --env позволяет вам передавать переменные среды manu как вам угодно.

В вашем скрипте сборки передайте это:

--env.PLATFORM=production

Например, где-нибудь в конфигурации webpack, вам нужно преобразовать в module.exports функцию:

module.exports = env => {

 if (env.PLATFORM === 'production') {
  return {  
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

   };
   }

Но для производства и разработки я бы порекомендовал сделать разные конфигурационные файлы веб-пакета:

webpack.prod.config.js
webpack.dev.config.js

Позже вы можете передать --config webpack.prod.config.js в свой скрипт сборки. И обычно для env в веб-пакете, когда речь идет о слиянии различных частей конфигурации веб-пакета, предназначенных для различных сред