点击Inertia Link无跳转,报this.resolveComponent未定义的技术问询
Django + Inertia + Vue 环境中
<Link>组件点击报错问题 我正在搭建Django、Inertia与Vue的运行环境,已完成官方文档配置。目前Vue页面/组件可正常渲染加载,但<Link>组件无法正常工作:组件能正常渲染,hover时显示正确目标路径,但点击后控制台抛出Uncaught (in promise) TypeError: this.resolveComponent is not a function错误,页面不跳转。不过Django服务器控制台可看到对应的GET请求,且router.visit()功能正常。
main.html
{% load django_vite %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% vite_hmr_client %} {% vite_asset 'js/main.js' %} <title>Django-mysite</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> {% block inertia %}{% endblock %} </body> </html>
main.js
import 'vite/modulepreload-polyfill' import {createApp, h} from 'vue'; import {createInertiaApp } from '@inertiajs/vue3'; const pages = import.meta.glob('./pages/**/*.vue'); createInertiaApp({ resolve: async name => { return (await pages[`./pages/${name}.vue`]()).default }, setup({el, App, props, plugin}) { const app = createApp({render: () => h(App, props)}) app.use(plugin) app.mount(el) }, })
vite.config.js
const { resolve } = require('path'); import vue from '@vitejs/plugin-vue'; module.exports = { plugins: [vue()], root: resolve('./static/src'), base: '/static/', server: { host: 'localhost', port: 3000, open: false, watch: { usePolling: true, disableGlobbing: false, }, }, resolve: { extensions: ['.js', '.json', ".vue"], }, build: { outDir: resolve('./static/dist'), assetsDir: '', manifest: true, emptyOutDir: true, target: 'es2015', rollupOptions: { input: { main: resolve('./static/src/js/main.js'), }, output: { chunkFileNames: undefined, }, }, }, };
package.json
{ "name": "js", "private": true, "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "@inertiajs/inertia-vue3": "^0.6.0", "@inertiajs/vue3": "^1.0.1", "vue": "^3.2.45" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "tailwindcss": "^3.2.6", "vite": "^4.1.0" } }
渲染链接的组件
<template> <Link :href="href" :class="[$page.component === component ? 'bg-indigo-800 text-white' : 'text-indigo-100 hover:bg-indigo-600', 'group flex gap-2 items-center px-2 py-2 text-sm font-medium rounded-md']"> <i :class="icon"></i> <slot></slot> </Link> </template> <script setup> import { Link } from '@inertiajs/inertia-vue3'; let name = "SidebarLink"; defineProps({ href: String, icon: String, component: String, }); </script> <style scoped> </style>
settings.py
""" Django settings for webinterface2 project. Generated by 'django-admin startproject' using Django 4.1.6. For more information on this file, see https://docs.djangoproject.com/en/4.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/4.1/ref/settings/ """ import os from pathlib import Path # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = 'django-insecure-+d3n=o3f&4el6mmh0_-gbk$ktk^2*o_(x@k*i8hx*ipkf(5*my' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = ["*"] # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', "inertia", "django_vite", "app" ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', "inertia.middleware.InertiaMiddleware" ] ROOT_URLCONF = 'webinterface2.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] WSGI_APPLICATION = 'webinterface2.wsgi.application' # Database # https://docs.djangoproject.com/en/4.1/ref/settings/#databases DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } } # Password validation # https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [ { 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', }, { 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', }, { 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', }, { 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', }, ] # Internationalization # https://docs.djangoproject.com/en/4.1/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_TZ = True # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/4.1/howto/static-files/ STATIC_URL = 'static/' # Default primary key field type # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(BASE_DIR, "media") # INERTIA_LAYOUT = os.path.join(BASE_DIR, "app", "templates", "base.html") INERTIA_LAYOUT = "main.html" DJANGO_VITE_ASSETS_PATH = os.path.join(BASE_DIR, "static", "dist") DJANGO_VITE_DEV_MODE = DEBUG STATIC_ROOT = os.path.join(BASE_DIR, "collectedstatic") STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH] CSRF_HEADER_NAME = 'HTTP_X_XSRF_TOKEN' CSRF_COOKIE_NAME = 'XSRF-TOKEN'
内容的提问来源于stack exchange,提问作者TimSch
相关产品推荐
相关产品推荐

