假设我有100多个用于不同laravel刀片文件的组件。 我有一个基于服务的系统,其中不同类型的用户可以访问不同的路由。假设我们的管理员面板,机构的管理员面板,员工面板,学生面板,监护人面板等。 作为管理员,我们可以访问全部。我们有20多个由同一系统管理并不断增加的机构。 当管理员访问系统时,他不需要加载整个js('npm run prod'中的6MB +)文件。但是由于整个项目中只有一个js文件,因此管理员用户必须加载整个6MB +的js文件。在“ npm run watch”模式下,js文件为13 MB以上! 如何为不同的用户设置不同的js或可以有多个js文件? 如何将我的应用程序锁定到最终用户?
仅是刀片文件的示例:
<institution-student-attach-form
get-site-base-country-list="{{route('get-institution-base-student-list')}}"
student-details-view="{{route('student-view',[''])}}">
</institution-student-attach-form>
我使用道具在零件文件中获取路线。
编辑
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').extract();
/**
*首先,我们将加载该项目的所有JavaScript依赖项, *包括Vue和其他库。这是一个很好的起点 *使用Vue和Laravel构建功能强大的强大Web应用程序。 * /
// require('./ bootstrap');
import Vue from "vue";
window.Vue = Vue;
window.axios = require("axios");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
require("promise.prototype.finally").shim();
import { Form, HasError, AlertError } from "vform";
window.Form = Form;
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);
Vue.component("pagination", require("laravel-vue-pagination"));
//sweet alert 2
import swal from "sweetalert2";
window.swal = swal;
const toast = swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 15000
});
window.toast = toast;
//vue lang
import VueInternationalization from "vue-i18n";
import Locale from "./vue-i18n-locales.generated";
Vue.use(VueInternationalization);
const lang = document.documentElement.lang.substr(0, 2);
// or however you determine your current app locale
const i18n = new VueInternationalization({
locale: lang,
messages: Locale
});
//vue lang end
//https://hamed-ehtesham.github.io/pretty-checkbox-vue/#installation
import PrettyCheckbox from "pretty-checkbox-vue";
Vue.use(PrettyCheckbox);
//vue autocomplete
//ckeditor
import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
/**
* Next, we will create a fresh Vue ap
*
*
* plication instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
// dash board
Vue.component(
"dashboard-site-employee-attendance-list",
require("./components/dashboard/site/employeeAttendanceListComponent.vue")
);
Vue.component(
"dashboard-site-latest-student-attendance-list",
require("./components/dashboard/site/latestStudentAttendanceListComponent.vue")
);
Vue.component(
"dashboard-site-employee-attendance-graph",
require("./components/dashboard/site/dashboardEmployeeAttendanceGraphComponent.vue")
);
Vue.component(
"site-academic-calendar-master-view",
require("./components/site/AcademicCalendar/academicCalenderMasterComponent.vue")
);
// Vue.component(
// "site-employee-academic-calendar-master-view",
// require("./components/site/employee/calendar/EmployeeCalendarMasterComponent.vue")
// );
Vue.component(
"site-employee-academic-calendar-master-view",
require("./components/site/employee/calendar/EmployeeCalendarMasterComponent.vue")
);
// Vue.component(
// "site-employee-academic-calendar-master-view",
// require("./components/employee/EmployeeAacademicCalenderMasterComponent.vue")
// );
Vue.component(
"site-academic-calendar-view",
require("./components/site/AcademicCalendar/academicCalendarComponent.vue")
);
Vue.component(
"site-academic-yearly-calendar-view",
require("./components/site/AcademicCalendar/academicYearlyCalendarComponent.vue")
);
Vue.component(
"site-academic-calendar-event-list-view",
require("./components/site/AcademicCalendar/academicCalendarEventListComponent.vue")
);
Vue.component(
"logged-common-view-all-notification-component",
require("./components/LoggedCommon/AllNotificationsComponent.vue")
);
// EDU INTERNAL-..------------------------------------START---------------------
Vue.component(
"edu-dashboard-palette-list",
require("./components/edu/dashboard-palette/DashboardPaletteComponent.vue")
);
Vue.component(
"edu-users-permission",
require("./components/edu/users/PermissionComponent.vue")
);
Vue.component(
"edu-role-list",
require("./components/edu/role/EduRoleComponent.vue")
);
Vue.component(
"edu-users-list",
require("./components/edu/users/EduUserComponent.vue")
);
//site memebership
Vue.component(
"site-membership",
require("./components/edu/site-membership/SiteMembershipComponent.vue")
);
Vue.component(
"menu-using-route-attachment",
require("./components/menu/MenuUsingRouteAttachmentComponent.vue")
);
//Edu Fetch Log ---relate component
Vue.component(
"edu-fetch-log-master",
require("./components/edu/fetch-log/masterComponent.vue")
);
//Edu Fetch Log ---relate component END
Vue.component(
"edu-package",
require("./components/edu/package/EduPackageComponent.vue")
);
Vue.component(
"academic-admission-fee-type-view",
require("./components/academic/AcademicAdmissionFeeTypeComponent.vue")
);
Vue.component(
"edu-site-payment-site-invoice-component",
require("./components/edu/site-payment/InvoiceMasterComponent.vue")
);
//edu-company
Vue.component(
"edu-company-company-list",
require("./components/edu/company/CompanyComponent.vue")
);
// EDU INTERNAL-------------------------------------END-------------------
//Site Employee Leave-----------------------start-----------------
Vue.component(
"employee-leave-history-master-component",
require("./components/site/EmployeeLeave/employeeLeaveMasterComponent.vue")
);
Vue.component(
"admin-leave-master-component",
require("./components/site/EmployeeLeave/adminLeaveMasterComponent.vue")
);
Vue.component(
"admin-leave-approve-master-component",
require("./components/site/EmployeeLeave/adminLeaveApproveMasterComponent.vue")
);
//Site Employee Leave-----------------------end-----------------
//Company-------------------------------------START-------------------
Vue.component(
"company-branch-list",
require("./components/company/branch/BranchComponent.vue")
);
Vue.component(
"company-role-list",
require("./components/company/role/RoleComponent.vue")
);
Vue.component(
"company-user-list",
require("./components/company/user/UserComponent.vue")
);
// Company-------------------------------------END-------------------
//SITE INTERNAL-------------------------------------Start---------------------
//---global component
Vue.component(
"site-base-student-filter-part-component",
require("./components/student/SiteBaseStudentFilterPartComponent.vue")
);
Vue.component(
"site-global-version-year-component",
require("./components/site/globalComponent/SiteVersionYearComponent.vue")
);
Vue.component(
"site-global-version-year-shift-component",
require("./components/site/globalComponent/SiteVersionYearShiftComponent.vue")
);
Vue.component(
"site-global-version-year-shift-dept-class-component",
require("./components/site/globalComponent/SiteVersionYearShiftDeptClassComponent.vue")
);
Vue.component(
"site-global-version-year-shift-dept-class-group-section-session-component",
require("./components/site/globalComponent/SiteVersionYearShiftDeptClassGroupSectionSessionComponent.vue")
);
Vue.component(
"site-global-version-year-shift-dept-class-group-section-session-period-type-component",
require("./components/site/globalComponent/VersionYearShiftDeptClassGroupSectionSessionPeriodTypeComponent.vue")
);
Vue.component(
"site-global-year-period-type-component",
require("./components/site/globalComponent/YearPeriodTypeComponent.vue")
);
Vue.component(
"site-version-year-shift-dept-class-group-component",
require("./components/site/globalComponent/SiteVersionYearShiftDeptClassGroupSessionPeriodTypeComponent.vue")
);
Vue.component(
"site-version-year-shift-dept-class-group-section-component",
require("./components/site/globalComponent/SiteVersionYearShiftDeptClassGroupSessionPeriodTypeAndSessionSectionTypeComponent.vue")
);
Vue.component(
"category-position-component",
require("./components/site/employee/categoryPositionComponent.vue")
);
Vue.component(
"site-user-master-component",
require("./components/site/users/masterComponent.vue")
);
Vue.component(
"site-site-options-master",
require("./components/site/options/masterComponent.vue")
);
//Site Exam --------------------------------------
Vue.component(
"site-examination-exam-type-setting-component",
require("./components/site/exam/SiteExaminationExamTypeSettingComponent.vue")
);
Vue.component(
"site-exam-committee-declare-component",
require("./components/site/exam/SiteExamCommitteeDeclareComponent.vue")
);
Vue.component(
"site-base-exam-declare-component",
require("./components/site/exam/SiteBaseExamDeclareComponent.vue")
);
Vue.component(
"site-exam-earks-entry-operator-base-component",
require("./components/site/exam/SiteExamMarksEntryOperatorbaseComponent.vue")
);
//Site Result --------------------------------------
Vue.component(
"site-base-result-setting-component",
require("./components/site/result/SiteBaseResultSettingComponent.vue")
);
Vue.component(
"site-base-result-generate-component",
require("./components/site/result/SiteBaseResultGenerateComponent.vue")
);
Vue.component(
"site-base-result-system-setting-component",
require("./components/site/result/SiteBaseResultSystemSettingComponent.vue")
);
//SITE INTERNAL------------------------------------END-------------------------
Vue.component("passport-clients", require("./components/passport/Clients.vue"));
Vue.component(
"passport-authorized-clients",
require("./components/passport/AuthorizedClients.vue")
);
Vue.component(
"passport-personal-access-tokens",
require("./components/passport/PersonalAccessTokens.vue")
);
//Assign Extra Permission
Vue.component(
"edu-user-assign-extra-permission",
require("./components/edu/users/AssignExtraPermissionComponent.vue")
);
//LARAVEL PASSPORT------------------------------------END-------------------------
Vue.component(
"example-component",
require("./components/ExampleComponent.vue")
);
Vue.component(
"timetable-component",
require("./components/TimetableComponent.vue")
);
Vue.component(
"sub-module-attachment-component",
require("./components/module/SubModuleAttachmentComponent.vue")
);
Vue.component(
"module-master-component",
require("./components/module/masterComponent.vue")
);
Vue.component(
"module-component",
require("./components/module/ModuleAttachmentComponent.vue")
);
Vue.component(
"academic-subject-component",
require("./components/academic/AcademicSubjectComponent.vue")
);
Vue.component(
"academic-subject-condition-component",
require("./components/academic/AcademicSubjectConditionComponent.vue")
);
Vue.component(
"academic-fee-component",
require("./components/academic/AcademicFeeComponent.vue")
);
Vue.component(
"academic-section-component",
require("./components/academic/AcademicSectionComponent.vue")
);
Vue.component(
"academic-group-detail-component",
require("./components/AcademicGroupDetailComponent.vue")
);
Vue.component(
"academic-session-type-component",
require("./components/academic/AcademicSessionTypeComponent.vue")
);
Vue.component(
"site-group-fee-head-subhead-group-setting-component",
require("./components/site_group/fee/SiteGroupFeeHeadSubHeadGroupSettingComponent.vue")
);
Vue.component(
"site-group-fee-tab-component",
require("./components/site_group/fee/SiteGroupFeeTabComponent.vue")
);
Vue.component(
"site-group-fee-allocation-component",
require("./components/site_group/fee/SiteGroupFeeAllocationComponent.vue")
);
Vue.component(
"site-group-fee-generate-component",
require("./components/site_group/fee/SiteGroupFeeGenerateComponent.vue")
);
Vue.component(
"site-group-waiver-generate-gomponent",
require("./components/site_group/fee/SiteGroupWaiverGenerateComponent.vue")
);
//==========Fee master Component===============
Vue.component(
"site-fee-setting-master-component",
require("./components/site/fee/feeSettingMasterComponent.vue")
);
Vue.component(
"site-fee-collection-master-component",
require("./components/site/fee/feeCollectionMasterComponent.vue")
);
Vue.component(
"site-fee-cancelation-master-component",
require("./components/site/fee-cancellation/feeCancellationMasterComponent.vue")
);
//--------------------End----------------------
Vue.component(
"site-group-demand-slip-generate-component",
require("./components/site_group/fee/SiteGroupDemandSlipGenerateComponent.vue")
);
Vue.component(
"site-demand-slip-generate-component",
require("./components/site/fee/SiteDemandSlipGenerateComponent.vue")
);
Vue.component(
"site-fee-multiple-student-payment-component",
require("./components/site/fee/SiteFeeMultipleStudentPaymentComponent.vue")
);
Vue.component(
"site-group-fee-single-student-payment-component",
require("./components/site_group/fee/SiteGroupFeeSingleStudentPaymentComponent.vue")
);
Vue.component(
"site-group-fee-multiple-student-payment-component",
require("./components/site_group/fee/SiteGroupFeeMultipleStudentPaymentComponent.vue")
);
Vue.component(
"site-fee-payment-component",
require("./components/site/fee/SiteStudentFeePaymentHistoryComponent.vue")
);
Vue.component(
"edu-site-group-component",
require("./components/edu/site_group/SiteGroupComponent.vue")
);
Vue.component(
"site-group-version-year-shift-dept-class-group-component",
require("./components/site_group/SiteGroupVersionYearShiftDeptClassGroupComponent.vue")
);
Vue.component(
"site-group-setting-component",
require("./components/site_group/SiteGroupSettingComponent.vue")
);
Vue.component(
"site-info-component",
require("./components/edu/site/SiteInfoComponent.vue")
);
Vue.component(
"site-batch-details",
require("./components/site/batch/BatchDetailsComponent.vue")
);
Vue.component(
"subject-group-condition-setting-component",
require("./components/site/SubjectGroupConditionSettingComponent.vue")
);
Vue.component(
"site-shift-class-group-section-component",
require("./components/site/SiteShiftClassGroupSectionComponent.vue")
);
Vue.component(
"site-class-similarity-component",
require("./components/site/SiteClassSimilaritiesComponent.vue")
);
Vue.component(
"site-class-session-position-component",
require("./components/site/SiteClassSessionPositionComponent.vue")
);
Vue.component(
"site-student-attach-form",
require("./components/student/SiteStudentAttachComponent.vue")
);
Vue.component(
"site-shift-details-component",
require("./components/site/SiteShiftDetailsComponent.vue")
);
Vue.component(
"site-student-attendance-list-component",
require("./components/site/student/attendance/StudentAttendanceListComponent.vue")
);
Vue.component(
"site-student-attendance-master-component",
require("./components/site/student/attendance/masterComponent.vue")
);
Vue.component(
"site-student-attendance-period-wise-component",
require("./components/site/student/attendance/PeriodAttendanceComponent.vue")
);
Vue.component(
"site-base-student-list-component",
require("./components/student/SiteBaseStudentListComponent.vue")
);
Vue.component(
"academic-group-list-tab-component",
require("./components/site/AcademicGroupListTabComponent.vue")
);
Vue.component(
"site-academic-period-type-setting-component",
require("./components/site/academic/PeriodTypeSettingComponent.vue")
);
// ==================site fee report==================
Vue.component(
"site-student-payment-report-master-component",
require("./components/site/fee-report/SiteFeeReportMasterComponent.vue")
);
Vue.component(
"site-student-wise-payment-report-component",
require("./components/site/fee-report/SiteStudentWisePaymentReportComponent.vue")
);
Vue.component(
"site-clas-wise-payment-report-component",
require("./components/site/fee-report/SiteClassBaseFeeReportComponent.vue")
);
Vue.component(
"site-general-payment-report-component",
require("./components/site/fee-report/SiteGeneralFeeReportComponent.vue")
);
//site-group related component============================
Vue.component(
"site-group-controlling-component",
require("./components/site_group/SiteGroupControllingComponent.vue")
);
//site group user
Vue.component(
"site-group-users-list",
require("./components/site_group/SiteGroupUserComponent.vue")
);
Vue.component(
"employee-attendance-master-component",
require("./components/site/employee/attendance/masterComponent.vue")
);
Vue.component(
"site-employee-attendance-device-attendance-component",
require("./components/site/employee/attendance/DeviceAttendanceComponent.vue")
);
Vue.component(
"site-employee-attendance-manual-attendance-component",
require("./components/site/employee/attendance/ManualAttendanceComponent.vue")
);
// ==================fee=========================
Vue.component(
"academic-fee-head-list-component",
require("./components/academic/academicFeeHeadComponent.vue")
);
Vue.component(
"academic-fee-sub-head-list-component",
require("./components/academic/AcademicFeeSubHeadComponent.vue")
);
Vue.component(
"academic-fee-group-list-component",
require("./components/academic/AcademicFeeGroupComponent.vue")
);
Vue.component(
"academic-site-waiver-type-view-component",
require("./components/site/SiteWaiverTypeComponent.vue")
);
Vue.component(
"site-fee-sub-head-allocation-view-component",
require("./components/site/fee/SiteFeeSubHeadAllocationComponent.vue")
);
Vue.component(
"site-fee-allocation-view-component",
require("./components/site/fee/SiteFeeAllocationComponent.vue")
);
Vue.component(
"site-student-fee-generate-view-component",
require("./components/site/fee/SiteStudentFeeGenerateComponent.vue")
);
Vue.component(
"student-waiver-generate-view-component",
require("./components/site/fee/StudentWaiverGenerateComponent.vue")
);
// Vue.component(
// "student-waiver-generate-view-component",
// require("./components/site/fee/OldStudentWaiverHistoryComponent.vue")
// );
Vue.component(
"site-student-offer-type-view-component",
require("./components/site/SiteStudentOfferTypeComponent.vue")
);
Vue.component(
"student-waiver-document-view-component",
require("./components/site/fee/StudentWaiverDocumentComponent.vue")
);
Vue.component(
"student-fee-offer-detail-view-component",
require("./components/site/fee/StudentFeeOfferDetailComponent.vue")
);
// Vue.component(
// "student-payment-view-component",
// require("./components/site/fee/StudentPaymentComponent.vue")
// );
/* ----------------routine------------------ */
Vue.component(
"site-routine-master",
require("./components/site/routine/masterComponent.vue")
);
Vue.component(
"class-timing-component",
require("./components/site/routine/ClassTimingComponent.vue")
);
Vue.component(
"class-timing-details-component",
require("./components/site/routine/ClassTimingDetailsComponent.vue")
);
Vue.component(
"class-timing-weekday-component",
require("./components/site/routine/WeekdayClassTimingComponent.vue")
);
Vue.component(
"routine-details-component",
require("./components/site/routine/RoutineSetupComponent.vue")
);
/* --------------------- */
/*--------------------Employee----------------------------- */
Vue.component(
"employee-year-version-shift-class-dept-group-section-component",
require("./components/site/employee/global/employeeYearVersionShiftClassDeptGroupSectionComponent.vue")
);
Vue.component(
"employee-attach-component",
require("./components/employee/EmployeeAttachComponent.vue")
);
Vue.component(
"employee-list-component",
require("./components/employee/EmployeeListComponent.vue")
);
Vue.component(
"site-employee-routine-master",
require("./components/site/employee/routine/masterComponent.vue")
);
//Notice============================
Vue.component(
"site-communication-notice-master-component",
require("./components/site/communication/Notice/MasterComponent.vue")
);
/*---------------------------- */
//Message============================
Vue.component(
"site-message-master-component",
require("./components/site/communication/MasterComponent.vue")
);
/* Vue.component(
"site-message-component",
require("./components/site/communication/MessageComponent.vue")
); */
Vue.component(
"site-inbox-component",
require("./components/site/communication/InboxComponent.vue")
);
Vue.component(
"site-folder-component",
require("./components/site/communication/FolderComponent.vue")
);
Vue.component(
"site-communication-custome-message-component",
require("./components/site/communication/MessageToCustomNumber.vue")
);
/*---------------------------- */
//Sms============================
Vue.component(
"site-sms-component",
require("./components/site/communication/SmsComponent.vue")
);
/*---------------------------- */
/* filter active and inactive */
Vue.filter("activeInactive", function(value) {
if (value == 1) {
return "Active";
} else {
return "Inactive";
}
});
Vue.filter("yesNo", function(value) {
if (value == 1) {
return "Yes";
} else {
return "No";
}
});
import moment from "moment";
Vue.filter("formatTime", function(value) {
if (value) {
return moment(String(value), ["HH:mm"]).format("hh:mm A");
}
});
Vue.filter("formatTimeSec", function(value) {
if (value) {
return moment(String(value), ["HH:mm:ss"]).format("hh:mm:ss A");
}
});
Vue.filter("formatDateTime", function(value) {
if (value) {
return moment(String(value)).format("DD MMMM YYYY hh:mm A");
}
});
Vue.filter("formatDayMonth", function(value) {
if (value) {
return moment(String(value), ["dd:mm"]).format("dd:mm");
}
});
Vue.filter("formatMinDiff", function(stTime, endTime) {
//console.log(stTime+' '+endTime)
var startTime = moment(stTime, "hh:mm:ss");
var endTime = moment(endTime, "hh:mm:ss");
var mins = moment
.utc(moment(endTime, "hh:mm:ss").diff(moment(startTime, "hh:mm:ss")))
.format("mm");
return mins + " mins";
});
Vue.filter("formatDate", function(value) {
console.log(value);
if (value) {
return moment(String(value)).format("DD MMMM YYYY");
}
});
//capitalize --- apple->Apple
Vue.filter("capitalize", function(value) {
if (!value) return "";
return value.charAt(0).toUpperCase() + value.slice(1);
});
//remove html tags
Vue.filter("striphtml", function(value) {
var div = document.createElement("div");
div.innerHTML = value;
var text = div.textContent || div.innerText || "";
return text;
});
Vue.filter("currency", function(value) {
return "৳ " + parseFloat(value).toFixed(2);
});
Vue.filter("round", function(value) {
return parseFloat(value).toFixed(0);
});
const app = new Vue({
el: "#app",
i18n,
components: {},
methods: {},
mounted() {
console.log("d" + document.documentElement.lang.substr(0, 2));
}
});
答案 0 :(得分:1)
您可以使用mix提取Vue框架核心库,然后使用webpack将特定页面所需的每个组件编译为单独的包
例如
mix.js(src, output).extract();
并具有注册Vue组件的JS文件
institution.js
Vue.component('institution-student-attach-form', require('./components/institution-student-attach-form.vue').default);
并编译为单独的文件
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/institution.js', 'public/js')
.extract()
.sass('resources/sass/app.scss', 'public/css')
并将该文件包含在特定的刀片视图中,依此类推,对于其他脚本和视图依此类推
希望这会有所帮助