Схема конфигурации нескольких сред Front-end Engineering (vue)

Webpack

предисловие

Интерфейсный проект должен выполняться в различных средах от разработки до запуска и соответствующим образом настраивать переменные среды.Если для обслуживания этих переменных используется рабочая сила, неизбежно возникнут ошибки, поэтому эта функция передаетсяwebpackсделать наиболее подходящим.

Введение в функции, связанные с веб-пакетом

В элементе конфигурации веб-пакета есть параметр режима, который можно настроить с помощьюproduction developmentДве опции, которые определяют, для какого режима используется упаковка, можно прочитать в коде проекта, используя следующий код:

if (process.env.NODE_ENV === 'production') {
    BASE_URL = 'https://host/production/api'
} else if (process.env.NODE_ENV === 'development') {
    BASE_URL = 'https://host/development/api'
}

Таким образом, API в режимах производства и разработки можно настроить отдельно, не изменяя каждый пакет.Если вам нужно добавить другие переменные в процесс, вы можете использоватьwebpack.DefinePluginДля персонализации используйте следующие методы:

// webpack.base.js
const webpack = require('webpack')
webpackConfig = {
    plugins: [
        new webpack.DefinePlugin({
            SOME_CONFIG: `"localhost"`
        })
    ]
}

Следует отметить, что'"localhost"', Если нужно определить строку, ее необходимо заключить в двойные кавычки.

Конфигурация переменной среды проекта vue

Если вы используете vue cli3 для инициализации проекта, вы также можете легко настроить среду.Подробности см. в официальной инструкции.process.v uejs.org/this/expensive/mo…

Однако эта конфигурация имеет определенные ограничения.Согласно документации, она может поддерживать не более трех сред.Если проект превышает три операционные среды, vue cli не может его поддерживать, поэтому схема пользовательской конфигурации среды более благоприятна для расширения. .

Последующие обновления

Прокомментированные одноклассники напомнили, а затем внимательно просмотрели официальные документы, кажется, что он может поддерживать более трех конфигураций среды, 囧, но эту идею конфигурации можно применить к другим проектам, поэтому сохраните статью.

webpack-chain

Поскольку vue cli3 полностью инкапсулирует веб-пакет, нет возможности изменить исходный файл конфигурации так же легко, как vue cli2, но cli3 выбрасываетwebpack-chainЧтобы персонализировать конфигурацию по умолчанию, пример использования выглядит следующим образом:

// vue.config.js
chainWebpack: config => {
    config.module
        .rule('js')
        .exclude
        .add(/\.min\.js$/)
        .end()

    config
        .output
        .set('filename', `js/[name].[hash:8]-v${__VERSION__}.js`)
        .set('chunkFilename', `js/[id].[hash:8]-v${__VERSION__}.js`)
}

Перед настройкой давайте посмотрим, как vue cli настраивает переменные среды, запускаемые в корневом каталоге проекта:

vue inspect > output.js

Будет сгенерирован файл output.js, прокрутите его вниз после открытия, и вы увидите такую ​​конфигурацию около строки 1080:

/* config.plugin('define') */
new DefinePlugin({
    'process.env': {
        NODE_ENV: '"development"'
    }
})

Изменив эту конфигурацию, в процесс можно добавить дополнительные переменные среды.

Конфигурация переменной среды egg.js

Недавно при использовании egg.js я ощутил удобство, которое дает настройка переменной среды egg.Смотри сюда, поэтому я решил подражать подходу яйца и интегрировать это решение в vue cli3.

Экологическое отличие

Модификация конфигурации будет объяснена позже, сначала для того, чтобы объяснить, как различать разные среды. Для отличия среды при запуске команды упаковки можно предварительно установить метку, которую можно использовать здесь.cross-envЧтобы установить переменные среды vue cli, пример кода выглядит следующим образом:

{
    "scripts": {
        "serve": "cross-env run_server=development vue-cli-service serve -mode development",
        "build": "npm run build:dll && cross-env run_server=production vue-cli-service build --no-clean",
        "build:UAT": "npm run build:dll && cross-env run_server=uat vue-cli-service build --no-clean",
    }
}

Для run_server определены три разных значения.development,production,uat, соответствующие разным средам службы, то при упаковке, если вы запускаете разные сценарии сценариев, вы можете получить соответствующие переменные среды и добавить их в процесс сборки.

Конфигурация переменных окружения

Создайте следующие файлы в корневом каталоге проекта:

image

Простой пример конфигурации:

// development_server.json
{
    "VUE_APP_RUN_ENV": "DevelopmentServer",
    "SERVER_IP": "/api",
    "DEV_PORT": 80,
    "SERVER_DOMAIN": "www.google.com",
    "PROXY_TARGET_IP": "http://192.168.2.236:8989"
}

Добавьте следующий код в vue.config.js

const RUN_SERVER = process.env.run_server || 'development'
const DefaultENVConfig = require('./env_config/default.json')
const serverEnvConfig = Object.assign({}, DefaultENVConfig, require('./env_config/' + RUN_SERVER + '_server.json'))

Получите соответствующий файл конфигурации через входящую целевую среду. В то же время используйте функцию Object.assign, чтобы объединить конфигурацию целевой среды с конфигурацией среды по умолчанию, чтобы получить окончательную конфигурацию переменной среды, а затем используйтеwebpack-chainЗапишите его в конфигурацию упаковки webpack:

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.plugin('define').tap(args => {
            for (let i in serverEnvConfig) {
                args[0]['process.env'][i] = `"${serverEnvConfig[i]}"`
            }
            return args
        })
    }
}

Таким образом, очень простой код реализует конфигурацию с несколькими средами.Если вам нужно добавить новую среду, вам нужно только добавить файл конфигурации и указать имя файла конфигурации для команды упаковки.

Категории