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材质模板和tryig进行编译。 这是我的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混合使用或将babel和im仍在学习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,
        },
    ]
})

Laravel使用import（）混合意外令牌

1 个答案: