WuLiSenSen

Appearance

Return to top
On this page

1. 问题

vue项目 3个页面引用了相同的一个css文件 index.d3ec8bd9.css。

该3个css文件有3个页面的不同css，虽然有scoped做了限制，但是显然不符合我们的预期，我们希望不同的页面引入不同的css文件。

2. 原因

经过仔细排查，发现只有这三个项目的css存在该问题，那么应该不是项目配置的问题；

最后发现是页面路由配置的问题，龙舟项目的路由是如下配置

routes: [
​
            {
​
                path: '/',
​
                name: 'index',
​
                component: () => import(/* webpackChunkName: "index" */'./modules/index'),
​
            },
​
            {
​
                path: '/rule',
​
                name: 'rule',
​
                component: () => import(/* webpackChunkName: "rule" */'./modules/rule'),
​
            },
​
            {
​
                path: '/ranking',
​
                name: 'ranking',
​
                component: () => import(/* webpackChunkName: "ranking" */'./modules/ranking'),
​
            },
​
        ]

而后两个是复制的 第一个的项目路由，代码如下

routes: [
​
            {
​
                path: '/',
​
                name: 'index',
​
                component: () => import(/* webpackChunkName: "index" */'./modules/index'),
​
            },
​
        ],

发现异步加载的页面 webpackChunkName 都为 index，所以最后 会把 3个页面的 css 都提取到 index 开头的css文件中

3. 解决方案

a) 放弃使用异步加载，因为不确定项目中是否有其他人使用了相同的webpackChunkName 

routes: [{
​
        path: '/',
​
        name: 'index',
​
        component: index,
​
    }

b) 使用与页面相关的 webpackChunkName 

routes: [{
​
        path: '/trace',
​
        name: 'trace',
​
        component: () => import(/* webpackChunkName: "2019-ncov-more" */'./pages/trace'),
​
    }

推荐 首页不使用异步加载，其他页使用异步加载 

routes: [{
​
        path: '/',
​
        name: 'index',
​
        component: index,
​
    }, {
​
        path: '/trace',
​
        name: 'trace',
​
        component: () => import(/* webpackChunkName: "2019-ncov-more" */'./pages/trace'),
​
    }
阅读量：