Vue的路由懒加载无效问题？

Question

本来打算用vue3写，用的vue-cli4，后来没有用vue3，里面是vue2的写法，下面是router.js喝vue.config.js,打包之后js并没有分割，求解答

{
  path: "name1", 
  component: ()=> import(/* webpackChunkName: "name1" */ '../views/name1.vue')
},
{
  path: "name2", 
  component: ()=> import(/* webpackChunkName: "name2" */ '../views/name2.vue')
},
...
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

export default router;

// vue.config.js如下：

const express = require('express')
const app = express()
var apiRoutes = express.Router();
module.exports = {
    lintOnSave: false,
    publicPath: '/admin',
    productionSourceMap: false,
}

Answer 1

安装 "@babel/plugin-syntax-dynamic-import"之后就可以了

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "@babel/plugin-syntax-dynamic-import"
    ]
  ]
}

Answer 2

vue-router官方说明

添加此插件试一下

https://babeljs.io/docs/babel-plugin-syntax-dynamic-import/

Answer 3

基于你提供的有限信息，我用vue-cli4创建了一个包含vue-router3的项目，这个是vue-cli自动选定的版本，是基于vue2的，我不清楚为什么你用vue2还用vue-router4，参见：https://router.vuejs.org/zh/guide/migration/

其次就算我理解错了，你用vue3 + vue-router4，那也应该去看vue-router4的文档，关于按需加载的说明：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

至少再确认好上面两点再去考虑是否因为SSR的影响。

请在提问前，先仔细阅读官方文档，并描述自己已经尝试过的解决方法，其实如果你完成这两步大部分问题就能够自己解决了。