Vue3组件同时作为自定义元素与普通Vue组件使用的样式问题

针对你遇到的.ce.vue后缀组件无法兼顾两种使用场景的问题，这里提供几种实用方案：

方案1：拆分样式与逻辑，共享核心代码 #

把组件的样式和业务逻辑抽成独立文件，分别给普通组件和Web组件文件引入，避免重复代码：

• 新建MyComponent.core.js，存放组件的props、setup逻辑等核心代码：

export default {
  props: {
    title: String
  },
  setup(props) {
    // 组件逻辑
  }
}

• 新建MyComponent.style.css，存放组件所有样式：

.my-component {
  padding: 1rem;
  border: 1px solid #eee;
}

• 分别创建MyComponent.vue（普通组件）和MyComponent.ce.vue（Web组件），各自导入核心逻辑和样式：
  • 普通组件：

  <template>
    <div class="my-component">{{ title }}</div>
  </template>
  <script>
  import core from './MyComponent.core.js'
  export default { ...core }
  </script>
  <style scoped>
  @import './MyComponent.style.css';
  </style>
  

  • Web组件：

  <template>
    <div class="my-component">{{ title }}</div>
  </template>
  <script>
  import core from './MyComponent.core.js'
  export default { ...core }
  </script>
  <style>
  @import './MyComponent.style.css';
  </style>
  

这样不管是用普通组件标签还是Web组件标签，样式和逻辑都能正常生效。

方案2：通过构建工具配置，单文件兼容两种场景 #

无需依赖.ce.vue后缀，直接通过Vite或Vue CLI的配置指定要编译为自定义元素的组件，让同一个.vue文件同时支持两种使用方式：

以Vite为例： #

1. 修改vite.config.js，指定需要编译为自定义元素的组件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      customElement: {
        include: /MyComponent.vue$/ // 匹配目标组件文件
      }
    })
  ]
})

2. 注册为Web组件时：

import { defineCustomElement } from 'vue'
import MyComponent from './MyComponent.vue'

const MyCustomElement = defineCustomElement(MyComponent)
customElements.define('my-component', MyCustomElement)

3. 作为普通Vue组件使用时，直接正常注册：

import MyComponent from './MyComponent.vue'

app.component('MyComponent', MyComponent)

Vue会根据编译目标自动处理样式：普通组件模式下按scoped样式处理，自定义元素模式下把样式注入到影子DOM中，两种场景样式都能正常生效。

方案3：动态注册组件，按需切换模式 #

创建一个统一的入口文件，提供不同的注册方法，根据使用场景选择：

// MyComponent.register.js
import MyComponent from './MyComponent.vue'
import { defineCustomElement } from 'vue'

// 注册为普通Vue组件
export function useAsVueComponent(app) {
  app.component('MyComponent', MyComponent)
}

// 注册为Web组件
export function useAsCustomElement() {
  const CustomEl = defineCustomElement(MyComponent)
  customElements.define('my-component', CustomEl)
}

在项目中需要用普通组件时调用useAsVueComponent(app)，需要用Web组件时调用useAsCustomElement()，组件的样式直接写在.vue文件中即可，Vue会自动适配两种模式的样式处理逻辑。

内容的提问来源于stack exchange，提问作者lando