【Laravel × Vue.js】VueのSPAプロジェクトをlaravel上で表示したい

https://github.com/PanJiaChen/vue-element-admin
こちらのSPAプロジェクトをLaravel上で動かしたいのですが、モジュールが見つからないとエラーが表示されている状態です。

作業は、こちらを参照
Laravel SanctumとVue.jsによるSPA認証

まずは、githubにあったvue-element-adminこちらのプロジェクトをlaravelのresources/js/配下にクローン

laravelのroutes/web.phpを変更

php
1use Illuminate\Support\Facades\Route;
2
3Route::get('{any}', function () {
4    return view('index');
5})->where('any', '.*');

laravelのviews/index.blade.phpの作成

larabvel
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6    <meta name="csrf-token" content="{{ csrf_token() }}">
7    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
8    <script src="{{ asset('js/main.js') }}" defer></script>
9    <title>Document</title>
10</head>
11<body>
12    <div id="app">
13        <router-view />
14    </div>
15</body>
16
17</html>

weback.mix.jsの変更

js
1const mix = require('laravel-mix');
2
3mix.js('resources/js/app.js', 'public/js')
4    .js("resources/js/vue-element-admin/src/main.js", "public/js")
5    .js("resources/js/vue-element-admin/src/router/index.js", "public/js")
6    .sass('resources/sass/app.scss', 'public/css');
7

laravelのresourcesディレクトリでnpm run devを実行

プロジェクト内のmain.jsはApp.vueを使わないのでコメントアウトしました。

import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import './styles/element-variables.scss'
import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import './icons' // icon
import './permission' // permission control
import './utils/error-log' // error log

import * as filters from './filters' // global filters

if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  locale: enLang // 如果使用中文，无需设置，请删除
})

// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
//こちらを↓コメントアウト
  // render: h => h(App)
})

追記
エラー文 npm run devを実行した際、複数のjsファイルで同じエラーがたくさん表示される
ERROR in ./resources/js/vue-element-admin/src/router/modules/nested.js
Module not found: Error: Can't resolve '@/views/nested/menu1/menu1-1' in '/Users/~~~~~~~~~/resources/js/vue-element-admin/src/router/modules'
@ ./resources/js/vue-element-admin/src/router/modules/nested.js 26:15-53
@ ./resources/js/vue-element-admin/src/router/index.js
@ multi ./resources/js/vue-element-admin/src/router/index.js

ブラウザ
ここでも同じようにモジュールの読み込みでエラー
Uncaught Error: Cannot find module '@/styles/index.scss'

参照リンクの方は特にモジュールに対して何かしてたわけではなかったのでうまくいくと思ったのですができず。