Vue js 通过 Webpack 将包拆分成几个文件

Posted 2023-02-23

【中文标题】Vue js 通过 Webpack 将包拆分成几个文件

【英文标题】：Vue js split bundle into few files via Webpack

【发布时间】：2018-08-15 10:36:02

【问题描述】：

我可以通过 wabpack 在几个文件上拆分 vue 生成文件吗？我需要使用没有其他组件的登录页面。如果我有这样的结构：

组件 登录.vue Home.vue 等

在我想要的构建目录中

js 捆绑 login_bundle CSS main.css login.css index.html login.html

webpack 有这方面的能力吗？

【问题讨论】：

是的，它确实有能力做到这一点。见这里webpack.js.org/guides/code-splitting

我想你想预渲染你的一些路线。见github.com/chrisvfritz/prerender-spa-plugin

【参考方案1】：

尝试急切导入。

const dependency = () => import(
  /* webpackChunkName: "login-chunk" */
  /* webpackMode: "eager" */
  'module in Login.vue'
).then(m => m.default || m);

【讨论】：

谢谢。我找到了其他解决方案/我拆分了登录页面和 vue 应用程序。我用于 Spring 安全的登录页面

@Lukashenko Yevhenii 所以你为登录设置了另一个应用程序？

我将页面添加到后端模板并在登录请求时返回它，然后我为用户返回构建 vue 应用程序