我在线下载了一个模板,以更好地理解 VueJS 并创建一个 Web 应用程序。但是我的路由有问题。我的路由器的 index.js 中有一个函数可以导入路径。由于一些 webpack 问题,导入语法似乎有问题。我尝试了很多不同的方法,但无法修复该错误,因此我想找到该 import
语法的解决方法
这是我的路由器index.js代码
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import Router from 'vue-router'
import Meta from 'vue-meta'
// Routes
import paths from './paths'
// import views from './views'
function route (path, view, name) {
return {
name: name || view,
path,
component: () => import(
`../views/${view}.vue`
)
}
}
Vue.use(Router)
// Create a new router
const router = new Router({
mode: 'history',
routes: paths.map(path => route(path.path, path.view, path.name)).concat([
{ path: '*', redirect: '/home' }
]),
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (to.hash) {
return { selector: to.hash }
}
return { x: 0, y: 0 }
}
})
Vue.use(Meta)
// Bootstrap Analytics
// Set in .env
// https://github.com/MatteoGabriele/vue-analytics
if (process.env.GOOGLE_ANALYTICS) {
Vue.use(VueAnalytics, {
id: process.env.GOOGLE_ANALYTICS,
router,
autoTracking: {
page: process.env.NODE_ENV !== 'development'
}
})
}
export default router
当我尝试构建它时,我收到一条错误消息:
ERROR in ./src/router/index.js
Module build failed: SyntaxError: C:/djangoProjects/martin - Copy/martin/src/router/index.js: Unexpected token (15:21)
语法错误位于 组件上的
行,并且恰好位于 route
函数中 (15:21): () => import( import
。解决这个问题很痛苦,所以我想知道是否有一个不使用 import
语法的解决方法?
最佳答案
如果我没记错的话,你需要一个可以处理动态导入的 babel 插件。
查看: https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import
- 运行
npm install @babel/plugin-syntax-dynamic-import
- 创建或打开 .babelrc
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
关于javascript - VueJS 路由中 "component: () => import()"的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56347483/