如何在没有 vue-cli 或节点的情况下处理延迟加载（异步加载）Vue？答案

【问题标题】：How to work on lazy load(async loading) Vue without vue-cli or node?如何在没有 vue-cli 或节点的情况下处理延迟加载（异步加载）Vue？
【发布时间】：2022-01-25 12:06:45
【问题描述】：

我对 vue 很陌生。我知道使用 vue-cli 很容易，但我需要先学习这一点，而不使用节点。我在不同的 js 文件中制作了许多模板文件和页面。突然我想到如果请求和下载大量文件怎么办？我想要做的是我试图将路由和异步组件加载融合在一起，以便在调用它们时加载不同的页面。有没有办法做到这一点？这是我为我的初始项目尝试的代码。

 <html>
 <head>
 
      <script src="vue.js"></script>
  <script src="vue-route.js"></script>
    <script src="axios.min.js"></script>

 </head>
 <body>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</div>
 <script>
 //axios.get("https://shohanlab.com")

const Home = { template: '<div>Home</div>' }
const AsyncComp =
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: About
      })
    })
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: AsyncComp },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})

const app =Vue.createApp({})
app.use(router)
app.mount('#app')
  </script>
 </body>
</html>

正如我们在代码中看到的那样，About.js 甚至在我调用它之前就被调用了。这样页面会很大。

【问题讨论】：

你可以根据组件的可见性检查这个 npm 包的延迟加载。 npmjs.com/package/vue-observe-visibility
Vue 主要用于 Vue CLI 或其他节点设置。如果您是 Vue 新手，您可能希望避免非常规的事情，这些事情需要您自己找出解决方案，而不是使用常见的解决方案。这个要求是其中之一，它是一个极端情况。在这里，您可能会使用原生 ES 模块 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ，以及延迟导入的组件。 Vue.createApp({}) - 这是 Vue 3 代码，为什么问题标有 Vue 2？

标签： javascript node.js vue.js async-await vuejs3

【解决方案1】：

Vue 主要用于 Vue CLI 或其他带有构建步骤的节点设置。文档和几乎所有示例都涵盖了这种情况，并假设使用了 .vue SFC。仍然可以将 Vue 3 与 vanilla JavaScript 一起使用，但这种方式缺少文档、功能和许多未经构建就无法使用的第三方 Vue 库。

可以通过延迟加载来实现这一点（如另一个答案所述）。原生 ES 模块可用于相同目的以避免构建步骤。入口点也需要是一个模块。

demo:

index.html

 <div id="app">
 <h1>Hello App!</h1>
 <p>
   <router-link to="/">Go to Home</router-link>
   <router-link to="/about">Go to About</router-link>
 </p>
 <router-view></router-view>
</div>

<script type="module" src="script.js"></script>

关于.js

export default { template: '<div>About</div>' }

script.js

const routes = [
  { path: '/', component: { template: '<div>Home</div>' } },
  { path: '/about', component: () => import('./about.js') },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

const app =Vue.createApp({})
app.use(router)
app.mount('#app')

【讨论】：

【解决方案2】：

您可以按如下方式延迟加载视图：

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue')
  }
]

查看official docs了解更多信息

【讨论】：

我需要一种无需 vue-cli 或 npm 的方法。我想直接在浏览器上做。