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

Question

我是 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 甚至在我调用它之前就被调用了。这样页面会很大

Answer 1

您可以延迟加载视图，如下所示：

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

有关详细信息，请参阅 official docs

Answer 2

Vue 主要用于 Vue CLI 或其他带有构建步骤的节点设置。文档和几乎所有示例都涵盖了这种情况，并假设使用了 .vue SFC。仍然可以将 Vue 3 与 vanilla JavaScript 一起使用，但这种方式缺少文档、功能和许多 third-party 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>

about.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')

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

How to work on lazy load(async loading) Vue without vue-cli or node?

javascript

node.js

async-await

vue.js

vuejs3