Javascript vuejs中捆绑包和组件的单独js文件
假设我有100多个组件用于不同的laravel刀片文件。 我有一个基于服务的系统,不同类型的用户可以访问不同的路由。假设我们的管理员面板、机构的管理员面板、员工面板、学生面板、监护人面板等。 作为管理员,我们可以访问所有。我们有20多个机构由同一个系统管理,并日益增加。 当管理员访问系统时,他不需要加载整个js(npm run prod中的6MB+文件)。但由于整个项目中只有一个js文件,管理员用户必须加载整个6MB+js文件。在“npm运行监视”模式下,js文件为13MB+! 如何为不同的用户设置不同的js或可以有多个js文件? 如何将我的应用程序快速发送给最终用户 只是刀片文件的一个示例:Javascript vuejs中捆绑包和组件的单独js文件,javascript,laravel,vue.js,webpack,laravel-mix,Javascript,Laravel,Vue.js,Webpack,Laravel Mix,假设我有100多个组件用于不同的laravel刀片文件。 我有一个基于服务的系统,不同类型的用户可以访问不同的路由。假设我们的管理员面板、机构的管理员面板、员工面板、学生面板、监护人面板等。 作为管理员,我们可以访问所有。我们有20多个机构由同一个系统管理,并日益增加。 当管理员访问系统时,他不需要加载整个js(npm run prod中的6MB+文件)。但由于整个项目中只有一个js文件,管理员用户必须加载整个6MB+js文件。在“npm运行监视”模式下,js文件为13MB+! 如何为不同的用户
我使用道具获取组件文件中的路由
编辑
*首先,我们将加载该项目的所有JavaScript依赖项
*包括Vue和其他库。这是一个很好的起点
*使用Vue和Laravel构建健壮、功能强大的web应用程序。
*/
//需要('./引导')
您可以使用mix提取Vue framework核心库,然后使用webpack将特定页面所需的每个组件编译到单独的包中 比如说
mix.js(src,output.extract();
并具有注册Vue组件的JS文件
institution.js
Vue.component('institute-student-attach-form',require('./components/institute-student attach-form.Vue')。默认值);
并编译成一个单独的文件
mix.js('resources/js/app.js','public/js')
.js('resources/js/institution.js','public/js')
.摘录()
.sass('resources/sass/app.scss','public/css')
并将该文件包括在特定的刀片视图中,以此类推,用于其他脚本和视图
希望这有助于
mix.js(src,output.extract()代码>extract()的含义是什么?有没有办法将npm包压缩到单独的文件中@Saly 3301再次感谢您在webpack.mix.js
配置的末尾添加.extract()
,您将有vendor.js
包含VueJS和其他库,这样您就可以单独编译代码,而不是在app.js
中添加extract(),我会出现错误。请参阅post.append extract to js部分的编辑部分而不是sass,您提取的js库不是sass样式的`mix.js('resources/js/app.js','public/vue/js')。sass('resources/sass/app.scss','public/css')。extract('vue']);`它起作用了。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').extract();
/**
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));
}
});