如何搭建Vue.js Vite版本（非Vue CLI）与Django的集成环境

一、正确搭建Vite Vue + Django集成环境 #

你用npm init vue@latest没成功大概率是没做适配Django的配置，按以下步骤来：

• 初始化Vite Vue项目：执行npm init vue@latest，按需选择Router、Pinia等配置项，完成后进入项目目录执行npm install。
• 修改Vite打包配置：在项目根目录的vite.config.js（或vite.config.ts）中，配置输出目录和资源基础路径，让打包产物能被Django识别：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      // 打包到Django项目的static/vue目录下，路径根据你的Django项目结构调整
      outDir: '../django_project/static/vue',
      assetsDir: 'assets',
    },
    base: '/static/vue/'
  })
  

• 配置Django静态资源：在Django项目的settings.py中，确保STATIC_URL = '/static/'，并添加STATICFILES_DIRS = [BASE_DIR / 'static']（如果你的静态目录是这个）。
• 开发与生产联动：
  • 开发阶段：启动Vite服务（npm run dev），在Django模板中引入Vite的开发脚本：<script type="module" src="http://localhost:5173/src/main.js"></script>，实现热更新。
  • 生产阶段：执行npm run build打包Vue项目，在Django模板中引入打包后的vue/assets/index.[hash].js和vue/assets/index.[hash].css即可。

二、补全Vue CDN方式的组件功能 #

用CDN时默认可能引入的是运行时版本，导致无法解析模板或无法使用单文件组件，解决办法：

• 使用Vue完整版CDN：引入带编译器的版本，可直接在代码中写模板字符串注册组件：

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    const { createApp } = Vue
    createApp({})
      .component('my-component', {
        template: '<h1>自定义组件</h1>',
        data() {
          return { msg: 'Hello' }
        }
      })
      .mount('#app')
  </script>
  

• 支持单文件组件：如果想用.vue单文件组件，引入vue-sfc-loader来解析：

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-sfc-loader@latest/dist/vue-sfc-loader.js"></script>
  <div id="app"></div>
  <script>
    const { createApp } = Vue
    const { loadModule } = window['vue-sfc-loader']
  
    createApp({
      components: {
        'MyComponent': Vue.defineAsyncComponent(() => loadModule('./MyComponent.vue', {
          moduleCache: { vue: Vue },
          async getFile(url) {
            const res = await fetch(url)
            return res.text()
          }
        }))
      },
      template: '<MyComponent />'
    }).mount('#app')
  </script>
  

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