uni-app [plugin:vite:vue] 报错提示至少需要一个 <template> 或 <script> 在单文件组件中

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app [plugin:vite:vue] 报错提示至少需要一个 <template> 或 <script> 在单文件组件中

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.32
手机系统 Android
手机系统版本号 Android 15
手机厂商 华为
手机机型 ipad
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

配置了下面这个排除标签就报错 这个错 [vite] [plugin:vite:vue] At least one `<template>` or `<script>` is required in a single file component.
uni(),
vue({
template: {
compilerOptions: {
isCustomElement: v => ['wx-open-launch-weapp', 'wx-open-launch-app'].includes(v)
}
}
}),

操作步骤：

配置了下面这个排除标签就报错 这个错 [vite] [plugin:vite:vue] At least one `<template>` or `<script>` is required in a single file component.
uni(),
vue({
template: {
compilerOptions: {
isCustomElement: v => ['wx-open-launch-weapp', 'wx-open-launch-app'].includes(v)
}
}
}),

预期结果：

配置了下面这个排除标签就报错 这个错 [vite] [plugin:vite:vue] At least one `<template>` or `<script>` is required in a single file component.
uni(),
vue({
template: {
compilerOptions: {
isCustomElement: v => ['wx-open-launch-weapp', 'wx-open-launch-app'].includes(v)
}
}
}),

实际结果：

配置了下面这个排除标签就报错 这个错 [vite] [plugin:vite:vue] At least one `<template>` or `<script>` is required in a single file component.
uni(),
vue({
template: {
compilerOptions: {
isCustomElement: v => ['wx-open-launch-weapp', 'wx-open-launch-app'].includes(v)
}
}
}),

bug描述：

配置了下面这个排除标签就报错 这个错 [vite] [plugin:vite:vue] At least one `<template>` or `<script>` is required in a single file component.
uni(),
vue({
template: {
compilerOptions: {
isCustomElement: v => ['wx-open-launch-weapp', 'wx-open-launch-app'].includes(v)
}
}
}),

Harmonyos Next教程
2 回复

这里不用 vue，在 uni 里配置，带 uni({vueOptions:{xxx}})，具体看一下你项目中的 @dcloudio/vite-plugin-uni 的 d.ts


在处理 uni-app 结合 Vite 和 Vue 的开发环境中遇到关于单文件组件（SFC）的错误提示“至少需要一个 <template> 或 <script>”时，这通常意味着你的 .vue 文件中缺少了必要的结构元素。在 Vue 单文件组件中，<template> 和 <script> 标签是最基本的组成部分。下面是一个简单的代码示例，展示了一个符合要求的 Vue 组件，以及如何在 uni-app 中结合 Vite 使用。

示例 Vue 组件（MyComponent.vue）

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, uni-app with Vite!');
</script>

<style scoped>
/* 样式可以根据需要添加 */
text {
  font-size: 20px;
  color: #333;
}
</style>

确保 Vite 配置正确

在 uni-app 项目中引入 Vite 可能需要一些额外的配置。以下是一个简化的 vite.config.js 配置示例，用于支持 Vue 和 uni-app：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import uniApp from '@dcloudio/vite-plugin-uni-app'; // 假设有这样一个插件，实际情况可能不同

export default defineConfig({
  plugins: [
    vue(),
    uniApp() // 注意：这里只是一个假设的插件名，实际使用时需替换为有效的 uni-app Vite 插件
  ],
  resolve: {
    alias: {
      '@': '/src' // 常见的别名配置
    }
  }
});

注意：目前 uni-app 官方并未直接提供针对 Vite 的官方插件，因此上述 uniApp() 函数是一个假设的示例。实际上，你可能需要查找社区提供的解决方案或自己编写适配代码。

检查项目结构

确保你的 .vue 文件位于 src/components 或其他正确配置的目录下，并且项目结构符合 uni-app 和 Vite 的要求。

运行和调试

使用 Vite 启动开发服务器：

npm run dev

确保没有语法错误，并且所有依赖都已正确安装。如果问题仍然存在，检查控制台输出的详细错误信息，可能会提供更多关于问题的线索。

通过上述步骤，你应该能够解决关于缺少 <template> 或 <script> 标签的错误，并成功地在 uni-app 项目中使用 Vite 和 Vue。

回到顶部