Django+Vite+Vue3动态导入失效问题求助

核心问题 #

• 使用动态路径导入组件import Home from ./${store.data}/Home.vue;失效，硬编码路径./folder_1/Home.vue正常，store.data能正确输出folder_1。
• Vite提示Rollup无法解析该导入，建议添加至build.rollupOptions.external。
• 纯Vue+Vite环境下用defineAsyncComponent可正常工作，但Django环境下出现语法错误：
  • 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项目也存在相同问题。

解决方案 #

1. 让Vite预编译所有可能的动态模块 #

Vite静态分析无法识别完全动态的路径，需显式指定打包范围。在vite.config.js中配置Rollup的input，用glob匹配所有目标组件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    rollupOptions: {
      input: {
        // 匹配所有目录下的Home.vue，提前打包
        ...Object.fromEntries(
          Object.entries(import.meta.glob('./src/**/Home.vue')).map(([key, value]) => [
            key.replace('./src/', '').replace('/Home.vue', ''), value
          ])
        )
      }
    }
  }
})

2. 修正动态导入的写法 #

给Vite提供静态路径前缀，或直接用glob导入的组件映射获取目标组件，避免完全动态的路径：

// 在路由文件或组件中
import { defineAsyncComponent } from 'vue'
import store from '@/store'

// 方法1：用静态前缀提示Vite打包范围
const Home = defineAsyncComponent(() => import(`./${store.data}/Home.vue`))
// 注意：若store.data是完全动态的，需确保Vite已通过glob预编译该组件

// 方法2：直接用glob导入的组件映射
const componentMap = import.meta.glob('./**/Home.vue')
const Home = defineAsyncComponent(() => componentMap[`./${store.data}/Home.vue`]())

3. 确保Django模板正确加载ES模块 #

在Django模板中引入Vite生成的脚本时，必须添加type="module"属性，否则浏览器无法识别ES模块语法：

<!-- Django模板文件 -->
<script type="module" src="{% static 'vue-dev/main.js' %}"></script>

同时确认Vite的--base /static/vue-dev配置与Django的STATIC_URL路径匹配，保证静态资源能正确加载。

4. 优化开发模式的构建流程 #

将dev脚本从vite build --mode development -w改为vite dev，搭配代理配置，避免Django静态资源的解析限制：

// package.json
"dev": "vite --mode development --base /static/vue-dev --outDir ./src/staticfiles/vue-dev"

在vite.config.js中添加代理指向Django后端：

export default defineConfig({
  // ...其他配置
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 替换为你的Django服务地址
        changeOrigin: true
      }
    },
    port: 3000 // Vite开发服务器端口，可自行调整
  }
})

内容的提问来源于stack exchange，提问作者Jayesh