Laravel 使用 import() 混合意外令牌

Question

我试图在我的 vue 和 laravel 项目上运行 vuetify 材料仪表板，在修改了 laravel mix 和 npm 的 vuetify package.json（默认为 vue-cli）后，运行 npm run dev 或 npm run watch 命令会抛出此错误：

ERROR in ./resources/assets/js/router/index.js                                                                                              
Module build failed: SyntaxError: 
C:/wamp64/www/resources/assets/js/router/index.js: Unexpected token (22:28)                                                                                                                                                                              
name: name || view,                                                                                                                 
path,                                                                                                                               
component: (resolve) => import(                                                                                                                          
                        ^                                                                                                           
`@/views/${view}.vue`                                                                                                            
).then(resolve)                                                                                                                     
}  

我正在使用并尝试编译的 Vuetify 材料模板。 这是我的 Webpack：

const mix = require('laravel-mix');
const path = require('path')
mix.js('resources/assets/js/main.js', 'public/js');

mix.webpackConfig({
        output: {
        publicPath: "/",
    },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/assets/js'
    },
  },
})

我的 eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'standard',
    'plugin:vue/recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

Babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    "@babel/preset-stage-2"
  ]

 "plugins": ["dynamic-import-webpack"]
}

还有packets.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "node --max_old_space_size=8192 --max-old-space-size=8192 node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node --max_old_space_size=8192 --max-old-space-size=8192 node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "chartist": "0.11.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-chartist": "^2.1.2",
    "vue-meta": "^1.5.2",
    "vuetify": "^1.2.5"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-stage-2": "^7.0.0",
    "@mdi/font": "^2.5.94",
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-standard": "^3.0.1",
    "axios": "^0.17.1",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.4",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.2.0",
    "es6-promise": "^4.2.4",
    "eslint": "^5.15.0",
    "file-loader": "^1.1.11",
    "google-maps": "3.2.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "material-design-icons-iconfont": "^3.0.3",
    "popper.js": "^1.12",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-analytics": "^5.8.0",
    "vue-i18n": "^7.4.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  }
}

npm：'6.4.1'，节点：v10.15.1 请注意，我不确定它是 laravel mix 还是 babel，我仍在研究 babel 以便更好地理解。 感谢您的帮助

Answer 1

我假设您正在尝试实现在加载屏幕需要时利用代码拆分和异步加载组件的路由？

https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

let router = new Router({

    routes: [
        {
            name: 'example',
            path: '/example',
            component: AsyncComponent,
        },
    ]
})