Django Vite Vue 3动态导入问题

kuhbmx9i 于 2023-04-22 发布在 Go

关注(0)|答案(2)|浏览(242)

为什么下面的import在Vue 3中不起作用？

import Home from `./${store.data}/Home.vue`;

***console.log（${store.data}***）正确输出文件夹名称，目前为 folder_1。

下面的导入工作得非常好：

import Home from './folder_1/Home.vue';

我也试过用+符号连接字符串，但也不起作用。这个.vue文件是通过<router-view></router-view>从App.vue加载的。
请指导如何使导入工作？
更新：[vite]：Rollup无法解析导入“./${store.data}/Home.vue“这很可能是无意的，因为它可能会在运行时中断应用程序。如果确实希望将此模块显式外部化，请将其添加到build.rollupOptions.external
更新：尝试了defineAsyncComponent，当只使用Vue + Vite时，它可以在Vite应用程序中工作。但是我在通过Django使用时遇到了问题。以下是package.json的开发构建代码：

"dev": "vite build --mode development --base /static/vue-dev --outDir ./src/staticfiles/vue-dev -w",

我添加了“类型”：“module”也用于检查package.json。
现在面临的错误是

Uncaught SyntaxError: export declarations may only appear at top level of a module
Uncaught SyntaxError: import declarations may only appear at top level of a module

更新：一个简单的Django Vite Vue应用程序（默认的Vite应用程序）也面临着同样的问题。代码分享在这里：https://github.com/Jayesh-Mahato/djangovitevue/tree/master

django

来源：https://stackoverflow.com/questions/75988909/django-vite-vue-3-dynamic-import-issue

2条答案

按热度按时间

a8jjtwal1#

使用defineAsyncComponent：

<script setup>
import { defineAsyncComponent } from 'vue'
//....
const Home = defineAsyncComponent(() =>
  import(`./${store.data}/Home.vue`)
)
</script>

<template>
  <Home />
</template>

赞(0）回复(0）举报 2023-04-22

new9mtju2#

如果您想在路由器中执行此操作，可以使用Lazy Loading Routes。
就像这样：

const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import(`@/${store.data}/Home.vue`)
    }
  ]
});

赞(0）回复(0）举报 2023-04-22

我来回答

Django Vite Vue 3动态导入问题

2条答案

相关问题

热门标签

最新问答