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

编译后，名称从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
})