【108】Vue-router 2.8.1 懒加载使用Webpack 3 的import() 语句出错的解决办法

错误重现

文件结构:

blog108
  │
  ├─.babelrc
  ├─.npmrc
  ├─index.template.html
  ├─package.json
  ├─webpack.config.js
  ├─yarn.lock
  └─src
     │
     ├─App.vue
     ├─home.vue
     ├─main.js
     ├─router.js
     └─son.vue

.babelrc

{
  "presets": [
    ["latest", {
      "es2016": { "modules": false }
    }]
  ]
}

.npmrc

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

index.template.html


<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>blog105title>
  head>
  <body>
    <div id="app">
      <router-view>router-view>
    div>
  body>
html>

package.json

{
    "name": "blog079",
    "description": "CSDN blog02",
    "version": "1.0.0",
    "author": "",
    "private": true,
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8082",
        "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
        "babel-polyfill": "^6.26.0",
        "vue": "2.5.13",
        "vue-router": "2.8.1"
    },
    "devDependencies": {
        "babel-core": "6.26.0",
        "babel-loader": "6.4.1",
        "babel-preset-latest": "6.24.1",
        "babel-preset-stage-2": "6.24.1",
        "cross-env": "3.2.4",
        "css-loader": "0.28.7",
        "file-loader": "1.1.6",
        "html-webpack-plugin": "2.30.1",
        "node-sass": "4.7.2",
        "rimraf": "2.6.2",
        "sass-loader": "6.0.6",
        "url-loader": "0.5.9",
        "vue-loader": "13.6.1",
        "vue-template-compiler": "2.5.13",
        "webpack": "3.10.0",
        "webpack-dev-server": "2.9.7"
    }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
        app: ['./src/main.js'],
        // 把共用的库放到vendor.js里
        vendor: [
            'babel-polyfill',
            'vue',
            'vue-router'
        ]
    },
  output: {
    path: path.resolve(__dirname, './dist'),

    // 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了
    // dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前
    // 的'/dist/' 改成 '/'
    publicPath: '/',
    // publicPath: '/dist/',
    filename: '[name].[hash].js'
    // filename:'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // font loader
      {
        test: /\.(ttf|eot|woff|svg)$/i,
        loader: 'url-loader'
      },
      // 图片处理
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          limit: '1000',
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(docx)$/,
        loader: 'url-loader',
        options: {
          limit: '10',
          name: '[name].[ext]'
        }
      }
      // {
      //   test: /\.(png|jpg|gif|svg)$/,
      //   loader: 'file-loader',
      //   options: {
      //     name: '[name].[ext]?[hash]'
      //   }
      // }
    ]
  },
  plugins:[
    // 把共用的库放到vendor.js里
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    // 编译HTML。目的:在生产环境下,为了避免浏览器缓存,需要文件按照哈希值重命名。
    // 这里编译可以自动更改每次编译后引用的js名称。
    new HTMLPlugin({template: 'index.template.html'})
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'
import 'babel-polyfill';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

router.js

import Home from './home.vue';
// import sonVue from "./son.vue";


export default [
    {
        path:'/',
        name: "home",
        component:Home,
        children:[
            // redirect
            {
                path: 'son',
                name: 'son',
                component: ()=>import("./son.vue")
            }
        ]
    }
]

运行 npm run dev 报出如下错误:


ERROR in ./src/router.js
Module build failed: SyntaxError: D:/workspaceSet/vsc/csdnBlog/blog108/src/router.js: Unexpected token (15:31)

  13 |                 path: 'son',
  14 |                 name: 'son',
> 15 |                 component: ()=>import("./son.vue")
     |                                ^
  16 |             }
  17 |         ]
  18 |     }

解决方法

找到 .babelrc 文件,修改成如下样子:

{
  "presets": [
    ["latest", {
      "es2016": { "modules": false }
    }],
    "stage-2"
  ]
}

具体的代码细节可以查看https://gitee.com/zhangchao19890805/csdnBlog/tree/master/blog108

你可能感兴趣的:(vuejs,前端)