首页 > 其他分享 >vue3 动态编译组件失败:Component provided template option but runtime compilation is not supported in this bu

vue3 动态编译组件失败:Component provided template option but runtime compilation is not supported in this bu

时间:2024-03-23 21:55:25浏览次数:23  
标签:provided vue const option js template import runtime defineComponent

根据 vue3 官方文档 路由,写了如下一个简单的页面来模拟路由的实现。
为了减少 *.vue 文件的个数,在这个但页面中,使用 defineComponent 通过 object 定义组件。

<script setup>
import { ref, computed, defineComponent } from 'vue'
const Home = defineComponent({
  template: `<h1>Home</h1>`
})
const About = defineComponent({
  template: `<h1>About</h1>`
})
const NotFound = defineComponent({
  template: `<h1>404</h1>`
})

const routes = {
  '/': Home,
  '/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
  <div>
    <ul class="list-none flex justify-start space-x-5">
      <li><a href="#/">Home</a></li>
      <li><a href="#/about">About</a></li>
      <li><a href="#/non-existent-path">Broken Link</a></li>
    </ul>
    <component :is="currentView" />
  </div>
</template>

<style scoped>
li a {
  color: cornflowerblue;
}

h1 {
  font-size: 2em;
  font-weight: bold;
}
</style>

但是运行时,<ul> 元素正常渲染了,<component :is="currentView" /> 动态组件却没有正常渲染;浏览器 console 报出如下 warning:

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous> 
  at <SimpleRouterView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <KeepAlive> 
  at <RouterView> 
  at <App>

于是根据提示,在项目根目录下的 vite.config.js 中,添加 alias 内容 vue: 'vue/dist/vue.esm-bundler.js' 如下:

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
})

再次 pnpm run dev 启动项目,就正常实现了 路由 功能。

标签:provided,vue,const,option,js,template,import,runtime,defineComponent
From: https://www.cnblogs.com/dongling/p/18091751

相关文章

  • Optional避免空指针
    1/**2*<h1>学会Optional,规避空指针异常</h1>3**/4@SuppressWarnings("all")5publicclassOptionalUsage{67privatestaticvoidbadUsageOptional(){89Optional<User>optional=Optional.ofNullable(nu......
  • SpringbootLogingApplication has been compiled by a more recent version of the Ja
    一、问题描述:        SpringbootLogingApplicationhasbeencompiledbyamorerecentversionoftheJavaRuntime(classfileversion61.0),thisversionoftheJavaRuntimeonlyrecognizesclassfileversionsupto55.0        更新版本的Ja......
  • linux 中shell脚本中遇到 Runtime error (func=(main), adr=22): Divide by zero
    在Linux中编写Shell脚本时,遇到“Runtimeerror(func=(main),adr=22):Dividebyzero”这样的错误通常是因为在脚本中进行了除以零的操作,类似于编程语言中的除零错误。要解决这个问题,您需要检查Shell脚本中涉及到除法运算的地方,确保分母不为零。下面是一个示例S......
  • chrome.tabs.sendMessage和chrome.runtime.sendMessage的用法及区别
    在Chrome扩展开发中,chrome.tabs.sendMessage和chrome.runtime.sendMessage是用于不同目的的消息发送API,它们的主要区别在于消息的目标对象和发送范围:chrome.tabs.sendMessage:用于在扩展内的不同页面之间发送消息。消息的目标对象是指定的标签页或标签页中的contentsc......
  • OpenMP - runtime库函数
    常用函数。#include<iostream>#include<omp.h>#defineNUM_THREADS16usingnamespacestd;intmain(intargc,char*argv[]){omp_set_num_threads(NUM_THREADS);#pragmaompparallel{cout<<"threadnum:"<&......
  • Maven中optional标签详解(转)
    原文:https://blog.csdn.net/weixin_43888891/article/details/130510971作者:怪咖@来源:CSDN 一、前言<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version><optio......
  • Maven 中<optional>true</optional>和<scope>provided</scope>之间的区别(转)
    原文:https://segmentfault.com/a/1190000019266080?utm_source=tag-newest<optional>true</optional>和<scope>provided</scope>有什么区别呢?从语义来上理解optional可选的,可以理解为此功能/此依赖可选,如果不需要某项功能,可以不引用这个包。scopeprovided提供的,可以理解为此......
  • Emgu.CV.Runtime.Windows nuget 安装失败问题解决方案
    一、错误现象我正在尝试从VisualStudio2015中安装emgu.CV.runtime.windows,并通过右键单击引用并通过NuGet安装的推荐方法进行安装。但是我收到以下错误。无法安装包“Emgu.runtime.windows.msvc.rt.x6419.28.29336”。您正在尝试将此包安装到面向.NETFramework,Versio......
  • onnx runtime文档学习5-加速Pytorch之Pytorch推理
    网上充斥着ONNXRuntime的简单科普,却没有一个系统介绍ONNXRuntime的博客,因此本博客旨在基于官方文档进行翻译与进一步的解释。ONNXruntime的官方文档:https://onnxruntime.ai/docs/如果尚不熟悉ONNX格式,可以参照该博客专栏,本专栏对onnx1.16文档进行翻译与进一步解释,ONNX......
  • 中考英语首字母快速突破004-2021上海虹口英语二模-Exploring Fun Career Options for
    PDF格式公众号回复关键字:ZKSZM004原文​Withequalopportunities,womenareabletochoosetheirownidealjobs.Ifa9to5officejobisn'tyourstyle,considerthefollowingf(71)funjobsavailable.​Wedding(婚礼)planner​Whilesom......