vue.js，延迟加载路由，块错误

Question

我使用 Vue Cli

创建延迟加载组件如下：

router/admin/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

function lazyLoad(component){
    return() => import(/* webpackChunkName: "/chunk/" */ '../../components/' + component)
}

const routes = [
    {
        path: '/admin',
        component: Dashboard,
        name: 'dashboard',
        meta: { title: 'Dashboard' },
    },
    {
        path: '/admin/devices',
        component: lazyLoad('Admin/Devices.vue'),
        name: 'devices',
        meta: { title: 'Devices' },
        children: [
            {
                path: ":id",
                component: lazyLoad('Admin/Devices/Device.vue'),
                name: 'device',
                meta: { title: 'Device' },
            }
        ]
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

编译后，"chunk" 文件夹中会出现名称为 0> 的文件。访问路由时，出现404错误，因为没有正确指定路径：

/host.com/js/0.js

它应该：

/host.ru/public/vue/dist/js/chunk/...

问：我需要在哪里指定路径？

Answer 1

我能够通过以下方式解决问题：

文件中vue.config.js表示编译文件的路径

module.exports = {
    publicPath: '/public/vue/dist',
}

在注册路由的文件中更改

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

开启

const router = new VueRouter({
    mode: 'history',
    base: '/',
    routes
})

vue.js，延迟加载路由，块错误

vue.js, Lazy Loading Routes, chunks error

lazy-loading

vue.js

vue-router