步骤一
npm i page-skeleton-webpack-plugin
创建 vue.config.js
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')
module.exports = {
configureWebpack: {
plugins: [
new SkeletonPlugin({
pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
})
],
},
chainWebpack: (config) => { // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
if (process.env.NODE_ENV === 'production') {
config.plugin('html').tap(args=> {
args[0].minify.removeComments = false
return args
})
}
},
};
运行项目
npm run serve
报错解决办法Error:
listen EADDRINUSE: address already in use :::8989
修改node_modules/page-skeleton-webpack-plugin/src/skeletonPlugin.js
生成骨架屏
在浏览器打开页面,通过 Ctrl|Cmd + enter 呼出插件交互界面,或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互界面。
image.png
在浏览器控制台输入toggleBar 点击按钮生成 需要一小会时间
骨架屏生成好后,会跳转到以下页面
image.png保存骨架屏后,会在项目中的shell目录下生成相关骨架页面
image.png查看骨架屏效果
npm run build
打包出现了报 post:8989 试下先停止 本地服务(npm run serve) 就可以了
使用slow3G可以很容易地观察到效果
image.png
将rem的设置放在页面head中
网友评论