目录

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打包部署后跨域代理