为什么我不能在 vue-router routes.js 中使用 require？答案

【问题标题】：Why can't I use require in vue-router routes.js?为什么我不能在 vue-router routes.js 中使用 require？
【发布时间】：2020-02-25 23:19:32
【问题描述】：

使用 vue-router 时的标准设置是

main.js 需要 routes.js 文件，看起来像这样

//routes.js
import Register from './components/Register'
import Login from './components/Login'

module.exports = [{
            path: `/`,
            component: Login,
        }, {
            path: `/register`,
            component: Register,
        }]

我的问题是为什么我可以这样做

//routes.js
module.exports = [{
            path: `/`,
            component: require('./components/Login'),
        }, {
            path: `/register`,
            component: require('./components/Register'),
        }]

当我尝试时，我得到这个控制台错误

Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>

【问题讨论】：

我无法回答为什么这不起作用的问题，但您看起来可能正在尝试延迟加载您的路线 - 如果这是您想要完成的，请查看 @ 987654321@
不，我只是想缩短代码
不，已经很短了。请记住，require 与 import/export 完全不同。
No, it is already short - 我不同意
stackoverflow.com/questions/31354559/…

标签： javascript vue.js import vue-router require

【解决方案1】：

**import 和 require 工作方式不同，请参阅下面的链接，那里有关于该主题的良好文档。 ** es6 features 和require how Actually Works **查看文档 node js 如何在后台工作 module.export 如何工作 nodejs 设计模式是什么（node js 如何将我们的代码包装在立即调用的函数表达式中并将代码传递给 v8 引擎）

你可以简单地修改你的 routes.js 文件

component:() => import('./components/Register.vue') 或组件：require('./components/Login.vue').default

两者都可以

[{ path: '/', component:() => import('./components/Register.vue') }, { path: '/register', component: require('./components/Login.vue').default }];

【讨论】：