предисловие
Поскольку фронтенд-приложение отделено от фронтенда, а бэкэнд не поддерживается бэкендом, при разработке только фронтенд-приложения лучше использовать фиксированный адрес среды разработки при отладке. Когда приложения развертываются на серверах в разных средах, если адреса серверов и переменные среды, соответствующие этим средам, не настраиваются отдельно, может потребоваться изменение большого объема кода при каждом переключении среды. Информации об этой части в интернете меньше, поэтому далее буду использоватьvue-cli initгенерируется командойVue/WebpackПроект используется в качестве примера, чтобы представить идею простой конфигурации с несколькими средами, которую я использую в настоящее время.
1. Идеальная многосредовая конфигурация
В бэкенд-разработке параметры, соответствующие разным средам в проекте, настраиваются в разных файлах конфигурации. Когда требуется упаковка на основанииMavenизJavaпроект, обычно нужно добавить только после команды упаковки-PПараметр указывает среду Profile, и пакет соответствующей среды может быть упакован.webpackЕсли вы сможете сделать это при разработке или упаковке, будет намного удобнее.
/* maven常用打包命令 */
mvn clean package -P prod
Во внешних проектах команды отладки и упаковкиvue-cli initуже для насpackage.jsonгенерируется посередине.
/* /package.json */
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
}
Было бы удобно, если бы эти команды можно было преобразовать в аналогичные команды упаковки в бэкенде, например:
/* 改造后的命令，只是打个比方，实际并不一定是这样 */
"scripts": {
"start:dev": "npm run dev -P dev",
"build:test": "node build/build.js -P test"
}
/* 命令行 */
$ npm run start:dev //本地调试，开发环境
$ npm run build:test //打包，测试环境
Итак, первое, что нужно решить, это как передать параметры отлаживаемому/упакованному скрипту.
注意：Что я хотел бы отметить здесь, так это то,vue-cliЛеса помогли нам сгенерировать весь проект, а также есть соответствующиеwebpack.dev.conf.jsа такжеwebpack.prod.conf.jsдва отдельныхwebpackconfig, но из-за проблем с именами файлов (dev.conf.js/prod.conf.js), люди могут ошибочно подумать, что эти два файла являются конфигурацией webpack для разных сред. Но на самом деле один из этих двух файлов является конфигурационным файлом для локальной отладки, а другой — конфигурационным файлом для упаковки и развертывания. Debug/Package в двух режимах со средой (dev/test/pre/prodд.), можно комбинировать друг с другом. Теоретически эти дваwebpackФайл конфигурации, который я думаю, должен быть вызванwebpack.debug.conf.jsа такжеwebpack.build.conf.jsбыло бы более уместно.
2. Параметризация скрипта
существуетnode.jsСуществует несколько способов передать параметры в сценарий, например, с помощьюprocess.argv:
/* hello.js */
console.log('hello ', process.argv[2]);
/* 命令行 */
$ node ./hello.js tidus
//process.argv = ['node', './hello.js', 'tidus']
hello tidus
несмотря на то чтоprocess.argvОчень удобно, но настраиваемость невысокая, так что вотyargs, который является компонентом в node.js, доступ к которому можно получить черезnpmУстановить напрямую.===> ткните меня, чтобы просмотреть документацию API yargs
$ npm install yargs --dev --save
/* hello.js */
const argv = require('yargs').argv;
console.log('hello ', argv.env);
/* 命令行 */
$ node ./hello.js --env test
hello test
пройти черезyargsВы можете легко получить параметр командной строки с указанным именем.Далее мы увидим, как использовать этот параметр для достижения многофайловой конфигурации.
3. Введите переменные среды
первый вWebpackНа официальном веб-сайте документа было краткое введение в настройку переменных среды, см.Webpack Production. Говоря простым языком, этоDefinePluginПлагин заменит все вхождения указанных строк в нашем исходном коде на предоставленные нами объекты/строки, а файлы конфигурации для разных сред будут помещены в/configПод содержанием.
/* /build/webpack.dev.conf.js: */
plugins: [
new webpack.DefinePlugin({
// 源码中所有 process.env 都会被替换为
// '../config/dev.env'这个module export出来的东西
'process.env': require('../config/dev.env')
})
]
/* /config/dev.env.js */
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
Очевидно, что мы можем напрямую использовать этот плагин для обслуживания множества переменных среды. Мы можем динамически загружать файлы конфигурации различных сред с помощью параметров среды, переданных в скрипт выше, для достижения цели переключения сред. Динамически загружать код для различных сред конфигурации:
/* /build/webpack.env.conf.js */
// 定义参数配置
const argv = require('yargs').argv;
// 获取环境变量
const env = argv.e;
process.stdout.write('the env is '+ env +'\n');
// require指定的环境配置文件
const envConfigFile = "../config/" + env + ".env.js";
process.stdout.write('the env config file is '+ envConfigFile +'\n');
// 将require的配置文件原封不动export回出去
module.exports = require(envConfigFile);
Затем перетащите динамически загруженный файл среды вwebpackконфигурационный файл, так какwebpack.dev.conf.jsа такжеwebpack.prod.conf.jsнаследуются отwebpack.base.conf.js, так что мы напрямую перепишемwepack.base.conf.jsВ разделе конфигурации плагина добавьте напрямуюDefinePluginКонфигурация плагина и удалить конфигурацию плагина из исходного файла конфигурации:
/* /build/webpack.base.conf.js */
// 引入上面的webpack.env.conf模块
const envConfig = require('./webpack.env.conf')
module.exports = {
...
,
// 配置DefinePlugin插件
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': envConfig
})
],
...
}
Затем команда отладки/пакета по-прежнему использует сгенерированную по умолчанию команду, но параметры среды передаются после команды:
/* /package.json */
"scripts": {
"start:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e dev",
"start:test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e test",
"start:pre": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e pre",
"start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e prod",
"build:dev": "node build/build.js --e dev",
"build:test": "node build/build.js --e test",
"build:pre": "node build/build.js --e pre",
"build:prod": "node build/build.js --e prod",
}
Содержимое нашего файла конфигурации среды может быть примерно таким:
/* /config/test.env.js */
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"test"',
API_HOST: '"http://test.xx.com:8080"'
})
Затем мы можем использовать в исходном кодеprocess.env.NODE_ENVЧтобы получить значение настроенной нами переменной среды, вы даже можете отдельно извлечь модуль API:
/* /src/api/index.js */
const API_HOST = process.env.API_HOST;
export default {
api1: `${API_HOST}/path/to/api1`,
api2: `${API_HOST}/path/to/api2`
}
Наконец, эти конфигурации среды можно легко использовать в наших компонентах Vue:
/* /src/components/HelloWorld.vue */
import api from '@/api';
data () {
return {
msg: 'Welcome to Your Vue.js App',
env: process.env.NODE_ENV,
api1: api.api1,
api2: api.api2
}
}
4. Резюме
Весь процесс вниз, мы добавляемwebpack.env.conf.jsмодуль, немного модифицированныйvue-cli3 созданоwebpackПрофиль иconfigФайлы конфигурации для каждой среды добавляются в каталог.Структура проекта следующая: