vuecli3 执行 npm run build 打包命令报错:TypeError: file.split is not a function

问题

今天有个项目在打包的时候遇到了一个问题,就是执行 npm run build 命令的时候报错了,如下:

解决

我排查了一下,模拟代码如下:在打包的时候用了 MinChunkSizePlugin

js 复制代码
const webpack = require("webpack");

module.exports = {
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === "production") {
            // 通过合并的方式处理 chunk,以减少请求数
            config.plugins.push(
                new webpack.optimize.MinChunkSizePlugin({
                    minChunkSize: 100 * 1024
                })
            );
        }
    }
};

并且路由用了懒加载,而且只有一个地方有懒加载的写法:

js 复制代码
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
        }
    ]
});

这样就导致了报错,懒加载多的时候在开启,通过合并的方式处理 chunk,以减少请求数,一个的时候没必要。

相关推荐
凉白开<--17 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
Zz_waiting.20 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
GISer_Jing21 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
F2E_Zhangmo21 小时前
基于cornerstone3D的dicom影像浏览器 第一章 webpack5+vue2+cornerstonejs项目创建
vue·cornerstone·cornerstone3d·cornerstonejs
摇滚侠1 天前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin1 天前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
知识分享小能手1 天前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手2 天前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
赵得C2 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件