vue-cli_关于vue-cli打包后多出的js与css文件-526互联

平常并没有注意到打包后js与css有多少个文件, 一般而言执行打包命令后就差不多万事大吉, 然后交给后端去完成部署就好了. 但轮到自己亲手为打包文件设置CDN时, 发现, 原来打包出来文件多少还是有区别的. 如下, 是我打包出来的某个项目的文件和自动生成的html文件的引入文件.

├─dist
|  ├─favicon.ico
|  ├─index.html
|  ├─js
|  | ├─691.js
|  | ├─app.js
|  | └chunk-vendors.js
|  ├─css
|  |  ├─691.css
|  |  └app.css
├─.git

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" href="/favicon.ico">
  <title>type3</title>
  <script defer="defer" src="/js/chunk-vendors.js"></script>
  <script defer="defer" src="/js/app.js"></script>
  <link href="/css/app.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but type3 doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong></noscript>
  <div id="app"></div>
</body>

</html>

上面的打包后的代码里出现了html文件没有直接引入的css与js文件, 这一部分文件是由于vue-router的路由懒加载所额外打包生成的, 对于需要生成CDN文件的直接引入并不友好, 解决办法是关闭路由懒加载, 改写成直接引入形式

import MainContainer from '@/pages/MainContainer.vue'
import ArticleView from '@/pages/ArticleView.vue'
const routes = [
  {
    path: '/',
    component: MainContainer,
    // component: () => import('@/pages/ArticleView.vue'),
    meta: {
      headerCom: 'index'
    }

  },
  {
    path: `/article/:id`,
    component: ArticleView,
    // component: () => import('@/pages/ArticleView.vue'),
    meta: {
      headerCom: 'article'
    }
  }
]

可以看到打包出来的文件已经没有了未被引入的文件

├─dist
|  ├─favicon.ico
|  ├─index.html
|  ├─js
|  | ├─app.js
|  | └chunk-vendors.js
|  ├─css
|  |  └app.css