使用vue-skeleton-webpack-plugin
- 安装插件:
npm i vue-skeleton-webpack-plugin -D
- 在App.vue同级目录下创建Skeleton.vue 如下
- 继续同级目录下创建entry-skeleton.js 如下(这里需要注意下 最好写成template模板格式,而且给上id,他是通过querySelect来找的dom)
- Vue.config.js中配置插件
const path = require("path");
const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
module.exports = {
configureWebpack: config => {
// 添加插件
config.plugins.push(
new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, "./src/entry-skeleton.js")
}
},
minimize: true,
quiet: true,
router:{
mode:'hash',
routes:[
{
path:'/',
skeletonId:'skeleton1'
},
{
path:'/about',
skeletonId:'skeleton2'
}
]
}
})
);
},
// 配置css
css: {
// 是否使用css分离插件 extractTextPlugin
extract: true,
// 是否开启css sourcemap
sourceMap: false,
// 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: false
}
};
总体原理:主要原理是利用vue-server-renderer 将 .vue格式的骨架屏文件处理成html和css字符串的功能,进而完成骨架屏的注入,打包出来可以看到。
在我实验的过程中 发现比如加载首页,请求完index.html时他会出现骨架屏
但是从首页跳到其他页面 是没有出现骨架屏的,除非我们在其他页刷新进来 他会加载我们配置的当前路由的骨架屏模板。
我们切换路由发现它只是router-view那块在替换:
所以并未加载我们的骨架屏模板,我个人感觉 骨架屏使用初衷就是解决首屏白屏时间过久问题,如果要想在路由中使用,此时按需加载js,css时需要我们自己写适合当前页面下的骨架屏组件。
饿了么首屏骨架屏方案
① 安装 page-skeleton-webpack-plugin和html-webpack-plugin(需要替换html指定位置模板,一般vuecli3起手已经安装了html-webpack-plugin故不需再安装)
② 修改webpack配置添加插件
const {SkeletonPlugin} = require('page-skeleton-webpack-plugin')
const path = require('path')
module.exports = {
publicPath :'/',
assetsDir:'static',
configureWebpack:{
plugins:[
new SkeletonPlugin({
pathname:path.resolve(__dirname,'./shell'), // 用来存储 shell 文件的地址
staticDir:path.resolve(__dirname,'./dist'),
routes:['/','/about'] // 将需要生成骨架屏的路由添加到数组中
})
]
},
chainWebpack: config =>{
if(process.env.NODE_ENV !== 'development'){
config.plugin('html').tap(opts => {
opts[0].minify.removeComments = false // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
return opts
})
}
}
}
Vuecli3初始化的项目run serve后报端口冲突错???
如上添加一个if判断后 能正常启动
③ 控制台输入toggleBar 弹出编辑页
点击右边铅笔 来保存你所修改后的骨架屏样式,他会在根目录下创建一个shell文件夹:
④ nginx来作静态服务器发布,下载nginx 找到conf下的nginx.conf:
这里我将root 直接指定在我项目打包目录dist!!!
⑤ 这里有个比较坑的地方,在vue.config.js中publicPath我最开始设置的相对路径
PublicPath:’./’然后打包出来 开启nginx访问 首页没得问题,但是在路由其他页面刷新的时候会出现错误:“js报Uncaught SyntaxError: Unexpected token <”
报错解决1
报错解决2
将vue.config.js的publicPath改为“/”再打包 重启nginx。
同样,切换路由的时候 也不会出现骨架屏只是在第一次加载页面的时候 会根据路由来加载对应定制的骨架屏
总的来说对比了这两个方案:(同样是为了解决首页骨架屏白屏问题也就是第一次加载我spa的页面,不是精确到组件内的骨架屏)
① 饿了么插件零配置,不需要我们去关心骨架屏dom结构,但是他目前只支持history模式,也支持路由配置
② vue-skeleton-webpack-plugin这个插件需要我们自己去构建想要的骨架屏,如果业务变了需要改代码,它支持hash和history,也支持配置