uni-app 使用Vue3/Vite版本时，在vite.config.ts中引入@vitejs/plugin-vue后编译报错

开发环境	版本号	项目创建方式
Windows	Windows 10 专业工作站版 21H2	CLI

# 示例代码：

vite.config.ts完整代码如下：

```javascript
import { defineConfig } from "vite";  
import uni from "[@dcloudio](/user/dcloudio)/vite-plugin-uni";  
import vue from '[@vitejs](/user/vitejs)/plugin-vue'  
import path from "path";  

// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [uni(), vue()],  
  resolve: {  
    alias: {  
      '@': path.resolve(__dirname, 'src'), // 将'@'指向项目src目录  
    },  
  },  
});

app.vue中完整代码

<script setup lang="ts">  
import { onLaunch, onShow, onHide } from "[@dcloudio](/user/dcloudio)/uni-app";  
onLaunch(() => {  
  console.log("App Launch");  
});  
onShow(() => {  
  console.log("App Show");  
});  
onHide(() => {  
  console.log("App Hide");  
});  
</script>  
<style></style>

操作步骤：

使用npm build命令后编译出现该问题（任意平台）

预期结果：

编译成功

实际结果：

编译失败

bug描述：

vite.config.ts插入[@vitejs](/user/vitejs)/plugin-vue插件后，在编译时，提示

[plugin:vite:vue] At least one `<template>` or `<script>` is required in a single file component.
at App.vue:1:0

实际app.vue中存在<script>标签，即使加入了<template>标签编译依旧失败。在移除[@vitejs](/user/vitejs)/plugin-vue插件后编译成功，但是ts无法识别vue的单组件，或者组件实例只能通过any的形式来处理

htzhanglong 1楼•1 个月前

同问，解决了吗

ionicwang 2楼•1 个月前

在使用 uni-app 和 Vue 3 时，如果你在 vite.config.ts 中引入了 [@vitejs](/user/vitejs)/plugin-vue 并遇到编译错误，可能是由于配置不正确或与其他插件冲突导致的。以下是一些常见的解决方法：

1. 确保安装了正确的依赖

首先，确保你已经安装了 [@vitejs](/user/vitejs)/plugin-vue 和 vite 的最新版本：

npm install [@vitejs](/user/vitejs)/plugin-vue vite --save-dev

2. 配置 `vite.config.ts`

在 vite.config.ts 中正确配置 [@vitejs](/user/vitejs)/plugin-vue：

import { defineConfig } from 'vite';
import vue from '[@vitejs](/user/vitejs)/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});

3. 检查 `uni-app` 的兼容性

uni-app 的 Vue 3 版本可能对 Vite 的配置有一些特殊要求。确保你使用的是 uni-app 的 Vue 3/Vite 版本，并且按照官方文档进行配置。

4. 处理可能的插件冲突

如果你使用了其他 Vite 插件，可能会与 [@vitejs](/user/vitejs)/plugin-vue 产生冲突。尝试暂时移除其他插件，看看问题是否仍然存在。

5. 检查 `tsconfig.json`

确保你的 tsconfig.json 配置正确，特别是 compilerOptions 中的 types 和 lib 选项：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["dom", "esnext"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

6. 检查 `package.json` 中的 `type`

确保 package.json 中设置了 "type": "module"，以便支持 ES Modules：

{
  "type": "module"
}

7. 查看错误日志

如果以上方法都无法解决问题，建议查看编译时的详细错误日志，通常会提供更具体的信息，帮助你定位问题。

8. 参考 `uni-app` 官方文档

uni-app 的官方文档通常会有针对 Vue 3/Vite 版本的特殊配置说明，建议仔细阅读相关文档。

示例 `vite.config.ts`

以下是一个完整的 vite.config.ts 示例：

import { defineConfig } from 'vite';
import vue from '[@vitejs](/user/vitejs)/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true
  }
});