解决方法一

个人觉得这种方法很 Low

html
1<script>
2  export default {
3  	name:'Logo'
4  }
5</script>
6<script setup lang="ts">
7  // code 
8</script>

解决方法二

使用 vite 插件 vite-plugin-vue-setup-extend 很优雅

1. 安装插件

bash
1npm i vite-plugin-vue-setup-extend -D

2. 配置vite.config.js文件

js
1import { defineConfig } from 'vite'
2import VueSetupExtend from 'vite-plugin-vue-setup-extend'
3export default defineConfig({
4  plugins: [ VueSetupExtend() ]
5})

3. template 中使用

html
1<script lang="ts" setup name="demo">
2// code
3</script>
4

解决方法三

使用插件unplugin-vue-define-options

1. 安装插件

bash
1npm i unplugin-vue-define-options -D

2. 配置

js
1//vite.config.ts
2import { defineConfig } from 'vite';
3import vue from '@vitejs/plugin-vue';
4import DefineOptions from 'unplugin-vue-define-options/vite';
5
6export default defineConfig({
7  plugins: [vue(), DefineOptions()],
8});
9
10//vue.config.js 
11configureWebpack: {
12    plugins: [
13      require('unplugin-vue-define-options/webpack')()
14    ]
15  }

3. 需要ts类型的可在tsconfig中进行如下配置（未使用ts的忽略此步骤）

json
1// tsconfig.json
2{
3  "compilerOptions": {
4    // ...
5    "types": ["unplugin-vue-define-options" /* ... */]
6  }
7}
8

4. template 中使用

html
1<script lang="ts" setup  >
2  defineOptions({
3    name: 'AppPagination'
4  })
5</script>