Django 3和Vue 3的集成问题

两天来，我一直在尝试将Django 3与Vue 3集成在一起，我已经取得了部分成功，但并没有达到我想要的效果

舞台。我们的想法是将VUE3用于需要Javascript且对SEO不重要的组件，如预订表单等

通过使用django webpack loader将包注入django模板进行集成

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: "http://0.0.0.0:8080/",
  outputDir: './dist/',

    pages: {
        main: {
            // entry for the page
      entry: 'src/main.js',
    }
    },

  chainWebpack: config => {

    config.optimization
      .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: './webpack-stats.json'}])

    config.resolve.alias
      .set('__STATIC__', 'public')

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({"Access-Control-Allow-Origin": ["\*"]})
  }
};

这是**main.js**的内容，它是Vue3应用程序的入口点

从“vue”导入{createApp，reactive，ref}
const app=createApp({
el:“#应用程序”，
分隔符：['['，']]']，
设置（）{
常数数据={
返回的任务：ref（“”），
临时任务：参考（“”），
修改索引：ref（-1），
任务：反应性（[]），
}
常量方法={
选择：（索引）=>{
if（data.modify_index.value==索引）{
data.modify_index.value=-1；
}否则{
data.modify_index.value=索引
data.temp_task.value=data.tasks[data.modify_index.value]
}
},
deleteSelected:（）=>{
数据.任务.拼接（data.modify_index.value，1）；
data.modify_index.value=-1；
},
已选择更新：（）=>{
data.tasks.splice（data.modify_index.value，1，data.temp_task.value）；
data.modify_index.value=-1；
}
}
//不需要创建生命周期事件，但让我们模拟延迟
设置超时（（）=>{
data.tasks.splice（0，0，…['执行此操作