如何在非库包外部挂载并配置Vue3/Vite应用？

针对你的需求，这里提供几种比直接挂载window更优雅、扩展性更强的实现方式：

方案1：封装初始化工厂函数（类型安全+高扩展性） #

核心思路是在Vite项目内部封装好带插件配置的App创建逻辑，暴露一个工厂函数给模板调用，同时通过TypeScript扩展window类型避免any的强制转换。

Vite入口文件（src/main.ts） #

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
import { store } from './store'
import ChartPlugin from './plugins/ChartPlugin'

// 封装初始化函数，接收配置和挂载元素
function initMyApp(config: Record<string, any>, mountEl: string | HTMLElement) {
  const app = createApp(MyComponent, config)
    .use(store)
    .use(ChartPlugin)
  
  app.mount(mountEl)
  return app
}

// TypeScript类型扩展，避免window属性的类型报错
declare global {
  interface Window {
    initMyApp: typeof initMyApp
  }
}

// 将函数挂载到window供模板调用
window.initMyApp = initMyApp

Razor模板代码 #

<script type="module" src="/scripts/myapp.js"></script>
<script>
  window.initMyApp(
    { projectId: '@Model.Project_ID.ToString()' },
    '#my-app'
  )
</script>

这种方案的优势：

• 类型安全，无需any强制转换
• 工厂函数可随时扩展初始化逻辑（比如添加全局过滤器、错误拦截等）
• 模板代码简洁，逻辑清晰

方案2：自动识别挂载点+HTML属性传参（极致简洁） #

如果希望模板完全摆脱JS代码，可以让Vite脚本自动识别页面中的挂载元素，并通过HTML属性读取配置参数。

Vite入口文件（src/main.ts） #

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
import { store } from './store'
import ChartPlugin from './plugins/ChartPlugin'

// DOM加载完成后自动查找并初始化所有挂载点
document.addEventListener('DOMContentLoaded', () => {
  const appElements = document.querySelectorAll('[data-vue-app]')
  
  appElements.forEach(el => {
    // 从元素的data属性中读取配置
    const config = {
      projectId: el.getAttribute('data-project-id'),
      // 可扩展更多配置项
      // appName: el.getAttribute('data-app-name')
    }

    const app = createApp(MyComponent, config)
      .use(store)
      .use(ChartPlugin)
    
    app.mount(el)
  })
})

Razor模板代码 #

<div 
  data-vue-app 
  data-project-id="@Model.Project_ID.ToString()" 
  id="my-app"
></div>
<script type="module" src="/scripts/myapp.js"></script>

这种方案的优势：

• 模板无需编写任何JS代码，维护成本极低
• 支持页面中同时挂载多个独立的Vue实例，每个实例可通过data属性单独配置

方案3：UMD构建模式（兼容非ES模块环境） #

如果需要兼容不支持ES模块的旧环境，可以将Vite项目构建为UMD格式，通过普通script标签即可引入，无需type="module"。

修改vite.config.ts #

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

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/main.ts',
      name: 'MyApp',
      formats: ['umd'],
      fileName: () => 'myapp.js'
    },
    rollupOptions: {
      // 外部化Vue依赖（避免打包进产物，可根据需求调整）
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

Vite入口文件（src/main.ts） #

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
import { store } from './store'
import ChartPlugin from './plugins/ChartPlugin'

export default {
  init(config: Record<string, any>, mountEl: string | HTMLElement) {
    const app = createApp(MyComponent, config)
      .use(store)
      .use(ChartPlugin)
    
    app.mount(mountEl)
    return app
  }
}

Razor模板代码 #

<script src="/scripts/myapp.js"></script>
<script>
  MyApp.init(
    { projectId: '@Model.Project_ID.ToString()' },
    '#my-app'
  )
</script>

这种方案的优势：

• 兼容所有浏览器环境，包括不支持ES模块的旧版本浏览器
• 产物可通过CDN分发，使用方式更灵活

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