vue.js，延迟加载路线，块错误答案

【问题标题】：vue.js, Lazy Loading Routes, chunks errorvue.js，延迟加载路线，块错误
【发布时间】：2020-04-10 05:00:19
【问题描述】：

我使用 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开始的文件>出现在“chunk”文件夹中。访问路由时，出现404错误，因为路径指定不正确：

/host.com/js/0.js

它应该：

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

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

【问题讨论】：

webpackChunkName 是名称，不是路径，去掉斜线
webpackChunkName 是块的名称和路径！没有 /chunk/ 它将在没有文件夹“chunk”的情况下编译
我找到了解决办法，但是还不够好，因为现在链接也变了。在 vue.config.js publicPath: '/public/vue/dist',

标签： vue.js vue-router lazy-loading

【解决方案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
})

【讨论】：