vue2 vue3 打包单文件组件为独立的js文件,动态加载组件,异步加载组件

1.我被自己坑了(需求)

我想要的是 "异步加载组件",但是 根据以前的经验 搜索的关键字是"动态加载组件"

"动态加载组件" 在vue中有另外的意思.

另外 "打包单文件组件为独立js" 这个关键字搜索到的内容也不是我想要.

我的需求就是 把一个 单文件组件 打包成一个独立的js文件,然后再页面需要的时候加载,而不是加载全部

(2)解决方案

直接查看官方文档 "异步组件"相关文章

(3)一个简单的示例

坑逼啊非常简单,我搞了好几天,还专门找大神帮忙处理了(估计我描述有问题,他没有真正理解我的意思,也没有搞定)

cesi.vue 一个简单模块

<template>
<div>
  测试模块
</div>
</template>

<script>
export default {
  name: "cesi",
  data(){
    return{
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>

其他需要动态引用的地方

<template>
  <div class='LeftAd'>
    <div @click="add">点击</div>
<!--    <img src="/static/img/LeftAd.png"/>-->
    <component v-bind:is="name"></component>
  </div>
</template>

<script>
import Vue from 'vue'
Vue.component('cesi', function (resolve) {
// 这个特殊的 `require` 语法将会告诉 webpack
// 自动将你的构建代码切割成多个包，这些包
// 会通过 Ajax 请求加载
  require(['./cesi'], resolve)
})

export default {
  name: "LeftAd",
  data(){
    return{
      name:''
    }
  },
  methods: {
    add(){
       this.name ='cesi'
    }
  }
}
</script>

<style>
</style>

关键代码:

(1)<component v-bind:is="name"></component> 这个是根据 name 动态加载不同的组件

(2)Vue.component('cesi', function (resolve) {require(['./cesi'], resolve)})

这行代码表示,这个组件会以ajax的形式 在适当的时候加载.

当运行 npm run build 的时候 cesi.vue 会被打包成一个独立的js文件.

只有当 点击div 后触发 this.name ='cesi' 的时候 cesi.vue 真正使用的时候,vue才会自动从服务器请求js文件 加载组件.完全不用关心如何加载的问题.