Laravel 7配置vue-router出现编译报错的可行方案咨询

报错根因 #

所有报错均由版本不兼容导致：Laravel 7 默认搭载 Vue 2.x + Laravel Mix 5 构建工具链，你当前安装的vue-router@4.x是专为 Vue 3 设计的版本，仅提供ES Module格式输出，和现有工具链、Vue2生态完全不兼容，手动修改webpack mjs解析规则只会触发更多连锁兼容问题，无法从根本解决问题。

分步落地操作 #

• 第一步：卸载不兼容版本，安装Vue2适配的vue-router稳定版
  执行以下命令：

npm uninstall vue-router
npm install vue-router@3.5.4 --save-dev

• 第二步：创建路由配置文件
  在resources/js目录下新建router/index.js，写入以下配置：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 路由规则列表，按需替换为自己的组件路径
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/ExampleComponent.vue')
  }
]

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

export default router

• 第三步：在Vue入口文件挂载路由
  打开resources/js/app.js，调整内容为：

require('./bootstrap');

import Vue from 'vue'
import router from './router'

// 注册全局组件
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

new Vue({
    el: '#app',
    router // 挂载路由实例
});

• 第四步：配置后端路由兜底（适配history路由模式）
  打开routes/web.php，在所有路由规则的最末尾添加以下代码，避免前端路由刷新出现404：

Route::get('{any}', function () {
    return view('welcome'); // 替换为你挂载Vue应用的blade模板路径
})->where('any', '.*');

• 第五步：调整blade模板，添加路由出口
  打开挂载Vue应用的blade模板（默认是resources/views/welcome.blade.php），确保id为app的根节点内存在路由出口标签：

<div id="app">
    <router-view></router-view>
</div>

• 第六步：清理错误配置，重新构建
  打开webpack.mix.js，删除之前手动添加的.mjs解析规则，保持默认配置即可：

const mix = require('laravel-mix');

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

执行构建命令：

# 若存在依赖缓存问题，可先执行 rm -rf node_modules package-lock.json && npm install 再运行构建
npm run dev

报错对应说明 #

• Can't import the named export 'computed' from non EcmaScript module：vue-router@4 依赖Vue3的组合式API导出，在Vue2环境下无法识别对应导出项
• export 'default' (imported as 'VueRouter') was not found in 'vue-router'：手动添加的mjs解析规则强制webpack按CommonJS规范解析ES Module格式的vue-router@4包，而该版本未提供CommonJS默认导出，因此找不到对应导出项

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