When building a single page application with WebPack, vue-router was used. During route configuration, an import syntax error occurred. In view of this phenomenon, we will analyze together.

The route configuration code is as follows:

const routes = [{        
    path: '/customer01',        
    name: 'customer',        
    component: () => import('.. /.. /views/customer/Index.vue')}];export default routes;Copy the code

The error message is as follows:

ERROR inThe. / SRC/router/customer/index, js Module build failed (from. / node_modules / _babel - [email protected] @ Babel - loader/lib/index, js) : SyntaxError: D:/web4/webpack_spa_demo/src/router/customer/index.js: Unexpected token (5:25) 3 | path:'/customer01',
  4 |         name: 'customer',
> 5 |         component: () => import('./views/customer/Index.vue'7) | | ^ 6} |]; 8 |export default routes;Copy the code

Analysis of the

Import error, Babel plug-in already installed. There is a note on the vue-Router website that if you are using Babel, you will need to add the syntax-dynamic-import plugin for Babel to parse correctly.

So here’s the solution:

First install the plugin: babel-plugin-dynamic-import-webpack

Plan a

In the configuration file, introduce the plug-in:

{  "presets": [["env", {     
         "modules": false."targets": {        
            "browsers": ["1%" >."last 2 versions"."not ie <= 8"]}}]],"plugins": ['dynamic-import-webpack']}Copy the code

Scheme 2

Configure the corresponding plug-in in the webpack.config file:

module: {    
    rules: [       
        {         
           test: /\.js$/,     
           loader: 'babel-loader', exclude: /node_modules/, options: {// babelrc does not need to be added"babelrc": false// Do not use the. Babelrc configuration"plugins": [                    
                        "dynamic-import-webpack"]]}}}Copy the code


In summary, the official document needs to see more, see address vue-router route lazy loading.