时间戳

首页 > 解决方案 > Vue.js 模块构建

javascript - Vue.js 模块构建

问题描述

我们有大约 100 页的项目。我们正在将前端迁移到一些新兴技术。我们几乎已经完成了 Vue.js（使用 vue cli）。Vue CLI 在一个 build.js 中构建项目。我们有一个问题。我们有频繁的需求变化。因此，在每次小的更改之后，我们都必须上传整个构建 js，这需要对整个项目进行回归测试。有什么方法可以构建模块吗？因此，只有更改后的模块需要在更改后实时上传。

标签： javascriptvue.jsbuildvue-component

解决方案

使用 Vue 路由器：

以下方法将告诉编译器（Webpack）“返回”组件而不是“包含”它。导致给定组件被“分块”到自己的文件中以进行延迟加载。

例如

export default new Router({
    routes: [
        // Home component to be included in bundle.js
        {
            path: '/',
            name: 'home',
            component: Home
        },
        // code splitting - generate a separate unique chuck for about component.
        {
            path: '/about',
            name: 'about',
            component: () => import(/* webpackMode: "lazy" */ '@/views/About.vue')
        }
    ]
})

输出= bundle.js 和 about.js 或... 100 个其他文件，假设您每页都有一个组件。

使用 webpack：

您可以通过将 vue.config.js 文件添加到项目根目录来扩展和/或修改默认编译器 (webpack) 配置。

例如

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

请务必阅读https://cli.vuejs.org/guide/webpack.html上的所有文档，因为某些设置不应直接更改。

推荐阅读