企业官网建设流程全解析

网站制作方法,宿迁房产网yy找房,wordpress cdn插件,口碑好的设计培训机构背景在开发面向多学校的Vue项目时#xff0c;每个学校都需要独立的配置#xff08;名称、Logo、背景图、API地址等#xff09;。传统的多环境配置方案会产生大量脚本命令#xff0c;维护成本较高。为此#xff0c;设计了一套更简洁的单一入口方案#xff0c;通过交互式选…背景在开发面向多学校的Vue项目时每个学校都需要独立的配置名称、Logo、背景图、API地址等。传统的多环境配置方案会产生大量脚本命令维护成本较高。为此设计了一套更简洁的单一入口方案通过交互式选择实现配置的动态切换。核心思想使用一个统一的入口文件在运行或构建前动态生成配置。用户只需选择目标学校系统会自动完成所有配置更新并执行相应命令。相比传统的多脚本方案它更加简洁、直观特别适合需要频繁切换不同客户配置的项目。整体架构详细实现1. package.json{scripts:{dev:node src/config/index.js dev,build:node src/config/index.js build}}2. 环境变量文件配置 (.env.*).env.development 和 .env.production 保持变量占位符// .env.development# 开发环境配置ENVdevelopment// .env.production# 生产环境配置ENVproductionVUE_APP_BASE_TARGETVUE_APP_BASE_APIVUE_APP_CLIENT_NAMEVUE_APP_CLIENT_LOGOVUE_APP_CLIENT_BACKGROUND设计思路使用空值模板运行时动态填充保持文件结构一致性避免硬编码提高灵活性3. 学校配置数据 (config/js/schools.js)// 学校配置选项constschools[{name:XX学校,// 显示名称key:school1,// 项目标识符logo:/assets/logo.png,// 学校Logo路径background:/assets/school1-bg.png,// 背景图https:[// 环境配置数组{key:development,// 开发环境target:http://xxx:8080,// 代理目标base:/dev-api// API基础路径},{key:production,// 生产环境target:http://xxx:8888,base:/pro-api}]},// 可扩展更多学校配置{name:XX学校,// 显示名称key:school2,// 项目标识符logo:/assets/logo.png,// 学校Logo路径background:/assets/school2-bg.png,// 背景图https:[// 环境配置数组{key:development,// 开发环境target:http://xxx:8080,// 代理目标base:/dev-api// API基础路径},{key:production,// 生产环境target:http://xxx:8888,base:/pro-api}]}]module.exportsschools配置特点统一管理所有学校配置支持不同环境的API配置清晰的JSON结构易于扩展4. 配置管理工具 (config/js/utils.js)constreadlinerequire(readline);const{execSync}require(child_process);constfsrequire(fs);constpathrequire(path);classConfigManager{constructor(mode){this.modemode;this.validateMode();this.config{dev:{envFile:.env.development,env:development,command:vue-cli-service serve,message:正在启动项目...},build:{envFile:.env.production,env:production,command:vue-cli-service build,message:正在构建项目...}}[this.mode];}// 显示选择菜单showWelcomeMessage(schools){console.log();console.log(请选择要使用的学校配置 (${this.mode}模式));console.log();schools.forEach((school,index){console.log(${index1}.${school.name});});console.log();console.log();}// 获取用户输入asyncgetUserInput(schools){returnnewPromise((resolve,reject){constrlreadline.createInterface({input:process.stdin,output:process.stdout});rl.question(请输入对应数字选择配置 ,(answer){constchoiceparseInt(answer);if(isNaN(choice)||choice1||choiceschools.length){rl.close();reject(newError(请输入有效的数字选项));return;}constselectedSchoolschools[choice-1];console.log(\n\x1b[32m已选择${selectedSchool.name}\x1b[0m);rl.close();resolve(selectedSchool);});});}// 更新package.jsonupdatePackageJson(selectedSchool){try{constpackageJsonPathpath.join(__dirname,../../../package.json);constpackageJsonJSON.parse(fs.readFileSync(packageJsonPath,utf8));packageJson.nameselectedSchool.key;packageJson.descriptionselectedSchool.name;fs.writeFileSync(packageJsonPath,JSON.stringify(packageJson,null,2));console.log(\x1b[32m已更新 package.json 配置\x1b[0m);}catch(error){thrownewError(更新 package.json 失败${error.message});}}// 更新环境变量文件updateEnvFile(selectedSchool){try{constenvPathpath.join(__dirname,../../../${this.config.envFile});letenvContentfs.readFileSync(envPath,utf8);// 根据当前模式选择对应的API配置constenvConfigselectedSchool.https.find(configconfig.keythis.config.env)||selectedSchool.https[0];constupdates{VUE_APP_CLIENT_NAME:selectedSchool.name,VUE_APP_CLIENT_LOGO:selectedSchool.logo,VUE_APP_CLIENT_BACKGROUND:selectedSchool.background,VUE_APP_BASE_TARGET:envConfig.target,VUE_APP_BASE_API:envConfig.base};// 动态替换环境变量Object.entries(updates).forEach(([key,value]){constregexnewRegExp(^${key} .*,gm);envContentenvContent.replace(regex,${key} ${value});});fs.writeFileSync(envPath,envContent);console.log(\x1b[32m已更新${this.config.envFile}配置\x1b[0m\n);}catch(error){thrownewError(更新${this.config.envFile}失败${error.message});}}// 执行Vue命令executeCommand(){console.log(${this.config.message}\n);try{execSync(this.config.command,{stdio:inherit});}catch(error){thrownewError(执行失败${error.message});}}}// 辅助工具类classLogger{staticsuccess(message){console.log(\x1b[32m✓${message}\x1b[0m);}staticerror(message){console.log(\x1b[31m✗${message}\x1b[0m);}}classValidator{staticvalidateArgs(args){if(args.length3){Logger.error(请指定运行模式);Logger.info(用法: node common.js [dev|build]);process.exit(1);}}}module.exports{ConfigManager,Logger,Validator};5. 统一入口文件 (config/index.js)const{ConfigManager,Logger,Validator}require(./js/utils);constschoolsrequire(./js/schools);classApplication{constructor(){this.modeprocess.argv[2];Validator.validateArgs(process.argv);this.configManagernewConfigManager(this.mode);}asyncrun(){try{// 1. 显示欢迎信息this.configManager.showWelcomeMessage(schools);// 2. 获取用户选择的学校constselectedSchoolawaitthis.configManager.getUserInput(schools);// 3. 更新配置文件this.configManager.updatePackageJson(selectedSchool);this.configManager.updateEnvFile(selectedSchool);// 4. 执行命令this.configManager.executeCommand();}catch(error){Logger.error(error.message);process.exit(1);}}}// 启动应用(async(){constappnewApplication();awaitapp.run();})();}工作流程项目中使用配置templatedivclassschool-app!--使用动态Logo--img:srcschoolLogoalt学校Logoclasslogo/!--显示学校名称--h1{{schoolName}}/h1!--动态背景--divclasslogin-container:stylebackgroundStyle!--登录表单--/div/div/templatescriptexportdefault{computed:{schoolName(){returnprocess.env.VUE_APP_CLIENT_NAME;},schoolLogo(){// 处理Webpack别名路径constlogoPathprocess.env.VUE_APP_CLIENT_LOGO;returnrequire(logoPath.replace(,..));},backgroundStyle(){constbgPathprocess.env.VUE_APP_CLIENT_BACKGROUND;return{backgroundImage:url(${require(bgPath.replace(,..))}),backgroundSize:cover,backgroundPosition:center};},apiBaseUrl(){returnprocess.env.VUE_APP_BASE_API;}},mounted(){// 设置页面标题document.titlethis.schoolName;// 配置axios实例this.$axios.defaults.baseURLprocess.env.VUE_APP_BASE_TARGET;}};/script方案优势统一入口一个入口文件处理所有配置逻辑动态配置运行时生成配置无需预定义大量环境文件用户友好交互式选择降低使用门槛易于维护配置集中管理扩展方便