使用vue-skeleton-webpack-plugin 页面多出一个'l>'

Question

引入骨架屏时，多出一个‘l>’但是查看代码里都没有

webpack.skeleton.conf.js

const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.config.base')
const nodeExternals = require('webpack-node-externals')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {
    app: resolve('../src/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: 'commonjs2'
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: []
})

entry-skeleton.js

import Vue from 'vue'
import skeleton from './Skeleton.vue'
export default new Vue({
  components: {
    skeleton
  },
  template: '<skeleton id="skeleton1" />'
})

Skeleton.vue

<template>
  <div class="skeleton-wrapper">
    <header class="skeleton-header"></header>
    <section class="skeleton-block">
      <img src="data:image/svg+xml;base64,PH...">
      <img src="data:image/svg+xml;base64,PH...">
    </section>
  </div>
</template>

<script>
  export default {
    name: 'skeleton'
  }
</script>

<style scoped>
  .skeleton-header {
    height: 40px;
    background: #1976d2;
    padding:0;
    margin: 0;
    width: 100%;
  }
  .skeleton-block {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
  }

</style>

Answer 1

博主解决了 我现在也遇到了同样的问题

Answer 2

这个问题以前我也遇到过。

vue项目根目录有一个index.html文件，有一行是<div id="app-box">，所以webpack.prod.conf.js和webpack.dev.conf.js文件中，`new SkeletonWebpackPlugin({

        insertAfter: '<div id="app-box">',
        ....
    }),` 

这里要写成insertAfter: '<div id="app-box">', SkeletonWebpackPlugin插件默认的是insertAfter: '<div id="app">'