vue-cli按照库模式构建vue组件,html标签类名和css样式类名不一致的问题

node 版本: v16.8.0
npm 版本:7.21.0
Vue CLI v4.5.15
❯ Default ([Vue 2] babel, eslint)

  1. 创建一个 vue 组件

    <template>
    <div>
     <date-picker v-model="currentValue" :type="type"></date-picker>
    </div>
    </template>
    <script>
    import DatePicker from 'vue2-datepicker';
    import 'vue2-datepicker/index.css';
    import 'vue2-datepicker/locale/zh-cn';
    
    export default {
     props: {
       value: {
         type: String,
         default: function() {
           return ""
         }
       },
       type: {
         type: String,
         default: function() {
           return "datetime"
         }
       },
     },
     components: { DatePicker },
     data() {
       return {
         currentValue: this.value
       }
     },
     watch: {
       value(newValue) {
         this.currentValue = newValue
       },
       currentValue(newValue) {
         this.$emit('input', newValue)
         this.$emit('change', newValue)
       }
     }
    }
    </script>
  2. 构建

    vue-cli-service build --dest 'dist/datepicker' --target lib --name vlibDatePicker 'src/components/DatePicker.vue'
  3. 生成文件

vue-cli按照库模式构建vue组件,html标签类名和css样式类名不一致的问题

  1. 访问 demo.html 发现样式有问题

vue-cli按照库模式构建vue组件,html标签类名和css样式类名不一致的问题

  1. 原因是 html 标签的 class 没有加上 hash,但是 css 文件类名却加上了 hash

vue-cli按照库模式构建vue组件,html标签类名和css样式类名不一致的问题

按照官方文档操作,有哪位知道问题出在什么地方么?或者是某些配置没有设置好?