如何在不使用WebPack构建的HTML页面中使用VueJS .vue组件？

当然可以！其实.vue组件本质就是把模板、脚本、样式封装在一起的语法糖，只要把它转换成浏览器能直接识别的格式，不用WebPack这类构建工具也能轻松用上。下面给你两种实用的实现方案：

方案一：手动拆解.vue组件（最稳妥） #

这是最直接的方式，把.vue文件的三个部分拆分出来，适配Vue的全局组件注册规则：

1. 提取模板：把.vue里<template>标签内的内容，放到页面的一个<template>标签中，并给它加个ID方便引用：

   <template id="my-favorite-component-tpl">
     <!-- 这里放.vue文件里的模板内容 -->
     <div class="component-root">{{ message }}</div>
   </template>
   

2. 注册组件：把.vue里<script>中的export default对象，改成Vue全局组件的注册格式。如果你的Vue实例是var v = new Vue(...)，直接在它之前注册组件即可：

   // 替换成你.vue文件里的组件选项
   Vue.component('my-favorite-component', {
     template: '#my-favorite-component-tpl',
     data() {
       return {
         message: 'Hello from my favorite component!'
       }
     },
     methods: {
       // 组件里的方法直接搬过来
     }
   });
   
   // 你的原有Vue实例
   var v = new Vue({
     el: '#app',
     // ...其他选项
   });
   

3. 处理样式：把.vue里<style>的内容直接复制到页面的<style>标签中。如果原组件用了scoped属性，记得给组件根元素加一个专属类名，手动实现样式隔离：

   <style>
     .component-root {
       /* 原scoped样式直接搬过来，嵌套在根类下 */
       padding: 1rem;
       background: #f5f5f5;
     }
   </style>
   

方案二：动态加载并解析.vue文件（适合不想手动拆分的场景） #

如果你不想手动拆解文件，可以用Vue的完整构建版本（包含模板编译器）配合fetch来动态加载并解析.vue文件：

1. 引入带编译器的Vue版本：注意不要用runtime-only版本，要引入包含编译器的CDN包（以Vue2为例）：

   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   

   Vue3的话则引入：

   <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
   

2. 动态加载并解析组件：用fetch获取.vue文件内容，通过正则提取模板、脚本和样式，再注册成全局组件：

   // 加载你的.vue组件文件
   fetch('./path/to/my-favorite-component.vue')
     .then(res => res.text())
     .then(rawComponent => {
       // 1. 提取模板内容
       const templateMatch = rawComponent.match(/<template>([\s\S]*?)<\/template>/);
       const componentTemplate = templateMatch ? templateMatch[1].trim() : '';
   
       // 2. 提取并解析脚本内容
       const scriptMatch = rawComponent.match(/<script>([\s\S]*?)<\/script>/);
       if (scriptMatch) {
         // 把export default转换成可执行的变量声明
         const scriptCode = scriptMatch[1].replace('export default', 'const componentOptions =');
         // 执行脚本获取组件选项（注意：仅在信任的代码中使用eval，避免安全风险）
         eval(scriptCode);
   
         // 注册全局组件
         Vue.component('my-favorite-component', {
           ...componentOptions,
           template: componentTemplate
         });
   
         // 如果Vue实例已经挂载，重新挂载以识别新组件
         v.$mount('#app');
       }
   
       // 3. 提取并注入样式
       const styleMatch = rawComponent.match(/<style>([\s\S]*?)<\/style>/);
       if (styleMatch) {
         const styleEl = document.createElement('style');
         styleEl.textContent = styleMatch[1].trim();
         document.head.appendChild(styleEl);
       }
     });
   

注意事项 #

• 安全问题：方案二中的eval会执行任意代码，只适合加载你自己编写的、可信的组件，不要用来加载第三方未知组件。
• 组件依赖：如果你的.vue组件中引入了其他子组件，需要把这些子组件也用同样的方式处理，或者提前注册为全局组件。
• Vue版本适配：Vue3的组件注册方式略有不同，要换成Vue.createApp(...).component(...)的格式。
• Scoped样式：方案二无法自动处理scoped属性，同样需要手动给组件根元素加类名来隔离样式。

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