vueCli3 下骨架屏无法注入

[Qymh]

Description

1. 下载vueCli3初始的项目 执行 npm install
2. 运行 npm run serve ,项目正常运行,命令行也没有报错
3. 然后调出控制条点击,生成preview,预览都ok,可以二维码预览,然后点击,写入shell文件目录
4. 结束 npm run serve.再次输入npm run serve,重新打包项目,在项目根目录下生成dist目录,然后打开项目,在开发环境下shell并没有注入

5. 结束npm run serve,运行npm run build,dist目录被删除,重新写入dist的index.html在#app元素中没有注入骨架屏对应的html,在生产环境下也没有注入

Plugin configration

以下也是vue.config.js的所有配置

const path = require('path');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'),
        staticDir: path.resolve(__dirname, './dist'),
        routes: ['/']
      })
    ]
  }
}

Versions

• Page Skeleton: ^0.10.12
• Webpack: webpack4.x
• VueCli: 3.2.1

[redsanjin-1]

与你相同的情况，最后解决了吗？

[wlz1244]

我也是用的vueCli3，npm run build-prod后，骨架屏貌似没有注入，用3G慢网络，没有出现想要的效果

[Kntt]

config.plugin('html').tap(opts => {
          opts[0].minify.removeComments = false
          return opts
})

[i-show]

关注一下

[307god]

sheel没有注入是因为vue-cli编译的时候把注释去掉了，通过改配置文件不让他去掉注释，楼上上为正解， webpack-chain

config.plugin('html').tap(opts => {
          opts[0].minify.removeComments = false
          return opts
})