时间戳

首页 > 解决方案 > 如何仅部署 Vue 应用程序的一部分而不是完整的 Vue 应用程序？

vue.js - 如何仅部署 Vue 应用程序的一部分而不是完整的 Vue 应用程序？

问题描述

在我的项目中，我想部署我选择的单个视图以排除其他视图，以获得尽可能轻的生产构建。生产版本将包括视图运行所需的所有内容，我只需要以某种方式排除所有其他视图（可能还有视图不需要的某些文件）。

可以将 Webpack 配置为实现这样的目标吗？如果是这样，怎么做？

标签： vue.jswebpack

解决方案

我不知道您是否可以直接在 Webpack 中执行此操作，但如果您的目标是简单地在您的应用程序中使其他路由无法访问，在您的 Vue Router 配置中，您可以使用process.env.NODE_ENV === 'production'来确定您的环境，然后有条件地加载模块和路由。这应该会从您的构建中摇动未使用的组件。

const getRoutes = async () => {
  let routes = []

  if (process.env.NODE_ENV !== 'production') {
    const Foo = await import('./component/Foo.vue')
    routes.push({ path: '/foo', component: Foo })
  }

  routes.push({ path: '/bar', component: Bar })

  return routes
}

(async () => {
  const routes = await getRoutes()
  return new VueRouter({routes})
})()

推荐阅读