| Vue(六) | 您所在的位置：网站首页 › react前端项目打包生成dist文件夹命令 › Vue(六) |
Vue(六)
|
目录 1.vue懒加载配置 2.vue打包后dist文件夹跨域问题处理： 1.vue懒加载配置当使用npm run build打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了 修改配置前npm run build打包后的结构：
修改配置并打包后的项目结构：
route.js配置修改： 注意点： 1.所有component: About,类似的配置修改为import ('@/components/About.vue')，并且之前导入模板的语句也不需要了import About from '@/components/About.vue' 2.需要特殊处理打包到指定js的文件进行特殊配置，加入import ( /* webpackChunkName: "user" */ '@/components/User.vue')，则所有加了 /* webpackChunkName: "user" */ 的配置处的模板都会打包到一个js文件中，如下例中Cart，User，Profile三个模板打包到一个js文件中 import Vue from 'vue' import Router from 'vue-router' // import Home from '@/components/Home.vue' // import About from '@/components/About.vue' // import Item from '@/components/Item.vue' // import Login from '@/components/Login.vue' // import User from '@/components/User.vue' // import Profile from '@/components/Profile.vue' // import Cart from '@/components/Cart.vue' // //书城 // import BookType from '@/components/book/BookType.vue' // import BookBoy from '@/components/book/BookBoy.vue' // import BookGirl from '@/components/book/BookGirl.vue' // // 错误页面 // import NotFound from '@/components/NotFound.vue' // 进度条加载样式 import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const appRouter = new Router({ mode: 'history', base: process.env.BASE_URL, // scrollBehavior: () => ({ y: 0 }), //可能会受到缓存的影响 scrollBehavior(to, from, savedPosition) { // console.log(savedPosition) if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }, routes: [{ name: "home", path: '/', // 路由地址的别名 alias: '/index', // component: Home // 打包懒加载 component: () => import ('@/components/Home.vue') }, { name: "about", path: '/about', // component: About, component: () => import ('@/components/About.vue'), // 利用路由元信息进行鉴权 meta: { // requiresAuth: true } }, { // 详情页：页面以动态路由形式赋值时:to='{name: "item", params:{id: item.id}}'，需要给路由设置name才能赋值 name: 'item', // :id配置在route配置时 path: '/item/:id', // component: Item, component: () => import ('@/components/About.vue'), // 当props: true时，route.params中的数据会自动被设置为组件属性并与组件原有props进行合并 props: true, // 利用路由元信息进行鉴权 meta: { // requiresAuth: true } }, { name: "login", path: '/Login', // component: Login component: () => import ('@/components/About.vue') }, // 嵌套路由 { // name: "user", path: '/user', // component: User, // 将User模块的都放在user里，便于查看 component: () => import ( /* webpackChunkName: "user" */ '@/components/User.vue'), children: [{ // 嵌套路由的子路由使用 / 和不使用 / 有很大区别 // path如果直接写空且父级没有定义name，则表示将此页面作为默认显示页面; // 如果父页面name有值且path: 'Profile'则表示没有默认页面会显示父级页面 name: "user", //设置成默认的子页面的name // name: "user-profile", path: '', // component: Profile, component: () => import ( /* webpackChunkName: "user" */ '@/components/Profile.vue'), }, { name: "user-cart", // 嵌套路由的子路由使用 / 和不使用 / 有很大区别 path: 'Cart', // component: Cart, component: () => import ( /* webpackChunkName: "user" */ '@/components/Cart.vue'), }, ] }, // 书城 { name: "bookType", path: '/BookType', redirect: to => { //作为中间男女频跳转的媒介，没有真正的Book模板 let type = localStorage.getItem("book-type"); return { name: type || "book" }; } }, { // 第一次进入书城，在没有选择男频女频前，需要点击bookType就链接到全频书城, // 但是在BookType路由中，如果直接写 return { name: type || "bookType" };自己再次路由到自己就会报错，所以需要设置第三方中介路由 name: 'book', path: '/Book', // component: BookType component: () => import ('@/components/book/BookType.vue'), }, { name: "bookBoy", path: '/BookBoy', // component: BookBoy, component: () => import ('@/components/book/BookBoy.vue') }, { name: "bookGirl", path: '/BookGirl', // component: BookGirl, component: () => import ('@/components/book/BookGirl.vue') }, { path: "*", // component: NotFound component: () => import ('@/components/NotFound.vue') }, ] }); //进度条配置 NProgress.configure({ easing: 'ease', // 动画方式 speed: 500, // 递增进度条的速度 showSpinner: false, // 是否显示加载ico trickleSpeed: 200, // 自动递增间隔 minimum: 0.3 // 初始化时的最小百分比 }) // 全局守卫（处理如鉴权等需求） // 当一个导航触发时，全局前置守卫按照创建顺序调用 let user = { id: 1 } appRouter.beforeEach((to, from, next) => { // 点击About和Item（查看详情）时，需要进行鉴权 // console.log(to, from); // if (["about", "item"].includes(to.name) || user.id === 0) { // next({ name: 'login' }); // } // NProgress.start(); // 每次切换页面时，调用进度条 NProgress.set(0.0); // 利用路由元信息进行鉴权 if (to.meta.requiresAuth) { next({ name: 'login' }); } else { next(); } }) // 在所有组件内守卫和异步路由组件被解析之后被调用 appRouter.beforeResolve((to, from, next) => { NProgress.set(0.4); next(); }) // 导航被确认后调用：因为导航已经被确认，所以没有 next appRouter.afterEach((to, from) => { // 在即将进入新的页面组件前，关闭掉进度条 // NProgress.done() NProgress.set(1.0); }) export default appRouter; 2.vue打包后dist文件夹跨域问题处理：最全vue打包前后的跨域问题,绝对解决你的问题_wx_zylsghhzy的博客-CSDN博客_vue打包部署后跨域代理 |
【本文地址】
公司简介
联系我们