我正在使用VueJS Webpack模板,该模板可以在此处找到:https://github.com/vuejs-templates/webpack
示例路由:
const AuthRoute = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue')
示例错误:
[eslint] 解析错误:意外的令牌import
我按照Webpack的动态导入部分提供的步骤以及Anthony Gore关于如何在VueJS中实现路由级别代码拆分的博客文章进行了操作。更具体地说,这是我的设置:
Package.json
...
"babel-core": "^6.22.1",
"babel-eslint": "^8.0.3",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-webpack": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.13.1"
...
.babelrc
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": [
"dynamic-import-webpack",
"syntax-dynamic-import",
"transform-runtime"
],
"env": {
"test": {
"presets": ["env", "stage-2"] }
}
}
.eslintrc.js
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
allowImportExportEverywhere: true
}
我有点不知道为什么还在看到这个错误。当使用npm run dev
和npm run build
时,我的代码可以正常运行并按预期工作,但是这个解析错误会阻止对文件的其余部分进行语法检查,我无法消除它。
非常感谢任何帮助!
npm install babel-eslint -g
。在我的情况下,行 "parser": "vue-eslint-parser" 不是必需的。 - Barabasparser: 'babel-eslint'
解决了我的问题。 - Clifford Fajardo