Laravel5.5+Vue2.5路由懒加载报Unexpected token错误求排查

Hey there! I’ve run into this exact issue a few times working with Laravel 5.5 and Vue 2.5, so let’s walk through the most likely fixes for your "Unexpected token" error with lazy loading.

First, let’s clarify the two syntaxes you mentioned: the one that throws an error is almost certainly the ES dynamic import() syntax (like const Home = () => import('./views/Home.vue')), while the working one is probably the Webpack-specific resolve => require(...) syntax. The problem here is that Laravel 5.5’s default Babel setup doesn’t include support for dynamic imports out of the box—even if you created a .babelrc file, you might be missing the critical plugin to handle this syntax.

Here’s how to fix it step by step:

1. Install the Required Babel Plugin #

Dynamic imports require the @babel/plugin-syntax-dynamic-import plugin to be transpiled correctly. Install it via npm:

npm install @babel/plugin-syntax-dynamic-import --save-dev

2. Update Your .babelrc Configuration #

Make sure your .babelrc includes the plugin alongside the modern ES preset. Your file should look something like this:

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Note: If you were using an older preset like babel-preset-es2015, switch to @babel/preset-env—it’s the recommended modern preset for Babel 7+, which plays nicely with Laravel 5.5.

3. Verify Laravel Mix Isn’t Overriding Babel Settings #

Check your webpack.mix.js file—you don’t need custom babel() configuration unless you have specific needs. The default setup will automatically read your .babelrc file. A basic Mix config looks like this:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

4. Check Your Node.js Version #

Laravel 5.5 requires Node.js 8.0 or higher. Older versions might not support underlying syntax that Babel relies on. Check your version with:

node -v

If it’s below 8.x, update to a compatible LTS release (8.x or 10.x work best for this stack).

5. Clear Caches and Rebuild #

Old build artifacts or npm caches can cause unexpected issues. Run these commands to start fresh:

rm -rf node_modules
rm package-lock.json
npm install
npm run dev

Double-Check Your Vue Router Syntax #

Once your Babel setup is fixed, here’s the correct lazy loading syntax for Vue Router:

// In your router file (e.g., resources/assets/js/router.js)
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

If you’ve followed all these steps and still run into issues, double-check that your .babelrc is in the root directory of your Laravel project (not nested in resources/ or another folder) and that you don’t have conflicting Babel configurations in package.json.

内容的提问来源于stack exchange，提问作者Rocky