Webpack不会为Vue应用中的延迟加载代码生成捆绑

时间:2019-01-09 13:22:44

标签: vue.js webpack lazy-loading babel vue-cli

我正在尝试在Vue应用程序中添加延迟加载功能。我想通过Vue Router和动态导入功能来延迟加载路由。我认为我的应用程序应该支持它,但是出现以下图片中的错误:

[1] https://imgur.com/uGWlj3W [2] https://imgur.com/4u6iusR

package.json

    {
        "version": "2.1.1",
        "private": true,
        "scripts": {
            "serve": "vue-cli-service serve",
            "build": "vue-cli-service build",
        },
        "dependencies": {
            "vue": "^2.5.17",
            "vue-router": "^3.0.1"
        },
        "devDependencies": {
            "@vue/cli-plugin-babel": "^3.0.1",
            "@vue/cli-plugin-e2e-cypress": "^3.0.1",
            "@vue/cli-plugin-eslint": "^3.0.1",
            "@vue/cli-plugin-unit-jest": "^3.0.1",
            "@vue/cli-service": "^3.0.1",
            "@vue/eslint-config-standard": "^3.0.1",
            "@vue/test-utils": "^1.0.0-beta.20",
            "babel-core": "7.0.0-bridge.0",
            "babel-jest": "^23.0.1",
            "node-sass": "^4.9.0",
            "sass-loader": "^7.0.1",
            "vue-template-compiler": "^2.5.17",
            "webpack-cdn-plugin": "^2.2.1"
        }
    }

vue.config.js

const webpack = require('webpack')
const WebpackCdnPlugin = require('webpack-cdn-plugin')

module.exports = {
assetsDir: 'static',
configureWebpack: () => {
    return {
        output: {
            filename: '[name].js',
            chunkFilename: '[name].js'
        },
        plugins: [
            new WebpackCdnPlugin({
            modules: [
                { name: 'vue', var: 'Vue', path: 'vue.min.js' }, // app minimal: 537KB
            ],
            prodUrl: '//cdnjs.cloudflare.com/ajax/libs/:name/:version/:path'
            })
        ],
        devServer: (process.env.NODE_ENV === 'production') ? {
            before: require('./tests/mock-api')
        } : {
            port: 3022,
            disableHostCheck: true
        }
        }
    }
}

router.js

import Vue from 'vue'
import Router from 'vue-router'

const Hub = () => import(/* webpackChunkName: "hub" */ './views/hub/Index.vue');

Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        { path: '/', component: Hub },
        { path: '*', redirect: '/' }
    ]
})

我希望加载没有错误的块

0 个答案:

没有答案