- 平常并没有注意到打包后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
