共计 7058 个字符，预计需要花费 18 分钟才能阅读完成。

按照官方文档，进行安装：

composer create-project --prefer-dist laravel/laravel laravel-vue-admin

下载 vue-element-admin

$ git clone https://github.com/PanJiaChen/vue-element-admin.git

将 vue-element-admin 中 package.json 中的 dependencies 与devDependencies 合并到 Laravel 的 package.json 中。

版本以 vue-element-admin 的版本为准

将 vue-element-admin 中整个 src 目录下的文件复制到 laravel 项目中的 resources/backend 目录中。

$ npm install

修改 webpack.mix.js 为：

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

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

mix.js('resources/backend/main.js', 'public/js')

在 resources/views 中添加 admin.blade.php 视图文件，代码如下：

<!doctype html>
<html lang="{{app()->getLocale()}}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{csrf_token() }}">
    <title>title</title>
</head>
<body>
<div id="app"></div>
<script src="{{mix('/js/main.js') }}"></script>
</body>
</html>

在 routes/web.php 文件中添加如下路由：

Route::get('/admin', function () {return view('admin');
});

$ npm run dev

打开浏览器即可看的内容

别名 `@` 未定义

$ npm run dev

报错如下：

ERROR in ./resources/backend/router/index.js
Module not found: Error: Can't resolve'@/views/zip/index'in'/path/to/laravel-vue-admin/resources/backend/router'
 @ ./resources/backend/router/index.js 365:13-40
 @ ./resources/backend/main.js
 @ multi ./resources/backend/main.js

解决方法：在 webpack.mix.js 添加如下代码：

mix.webpackConfig({
  resolve: {
    alias: {'@': path.resolve(__dirname, 'resources/backend'),
    },
  },
})

卡在 `70%` 无法继续

> @ dev /path/to/laravel-vue-admin
> npm run development


> @ development /path/to/laravel-vue-admin
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 70% building 2069/2069 modules 0 active

经过查找，找到文档，解决方法如下：

安装依赖

$ npm install babel-plugin-dynamic-import-node --save-dev

修改 webpack.mix.js

具体如下：

mix.webpackConfig({
  resolve: {
    alias: {'@': path.resolve(__dirname, 'resources/backend'),
    }
  }
})
// 此处新增
.babelConfig({plugins: ['dynamic-import-node']
});

sass 中 `/deep/` 解析失败

ERROR in ./resources/backend/components/HeaderSearch/index.vue?vue&type=style&index=0&id=6eba4ace&lang=scss&scoped=true& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/vue-loader/lib??vue-loader-options!./resources/backend/components/HeaderSearch/index.vue?vue&type=style&index=0&id=6eba4ace&lang=scss&scoped=true&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    /deep/ .el-input__inner {
   ^
      Expected selector.
    ╷
172 │     /deep/ .el-input__inner{
    │     ^
    ╵
  stdin 172:5  root stylesheet

这里应该是版本兼容问题。需要将所有 backend 目录中出现的 /deep/ 替换为 >>>。

ERROR in ./resources/backend/main.js
Module not found: Error: Can't resolve'../mock'in'/path/to/laravel-vue-admin/resources/backend'
 @ ./resources/backend/main.js 31:0-34
 @ multi ./resources/backend/main.js

这个解决方案看你需要，如果你需要 mock 接口，那么需要复制原 vue-element-admin 中的 mock 文件夹到 resources/mock 即可。

如果不需要，则需要将依赖 mock 资源的代码删掉。
涉及 resources/backendmain.js

ERROR in ./resources/backend/layout/components/Sidebar/Item.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/backend/layout/components/Sidebar/Item.vue?vue&type=script&lang=js&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path/to/laravel-vue-admin/resources/backend/layout/components/Sidebar/Item.vue: Unexpected token (20:18)

  18 | 
  19 |     if (icon) {> 20 |       vnodes.push(<svg-icon icon-class={icon}/>)
     |                   ^
  21 |     }

经查询为 bable 没有正确配置，直接复制 vue-element-admin 中 babel.config.js 即可。

找了许久，没有一个方法可以完美解决。后来根据文章找到思路

覆盖原始图片加载规则
新增 svg 图片的加载


Mix.listen('configReady', (webpackConfig) => {
  // Exclude 'svg' folder from font loader
  let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/));
  fontLoaderConfig.exclude = /(resources\/backend\/icons)/;
});

mix.webpackConfig({
  resolve: {
    alias: {'@': path.resolve(__dirname, 'resources/backend'),
    }
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [path.resolve(__dirname, 'resources/backend/icons/svg')],
        options: {symbolId: 'icon-[name]'
        }
      }
    ],
  }
}).babelConfig({plugins: ['dynamic-import-node']
});

然后完美执行：

 DONE  Compiled successfully in 19433ms                                                                                                                                                                                   10:33:44 AM
                                                                                                                                                                                                                                                                                       Asset      Size    Chunks             Chunk Names
                                                                               /css/app.css   174 KiB   /js/app  [emitted]  /js/app
                                                                                 /js/app.js  1.38 MiB   /js/app  [emitted]  /js/app
                                                                                /js/main.js  14.8 MiB  /js/main  [emitted]  /js/main
                                   fonts/element-icons.ttf?27c72091ab590fb5d1c3ef90f988ddce  10.8 KiB            [emitted]  
                                  fonts/element-icons.woff?9b70ee41d12a1cf127400d23534f7efc  5.98 KiB            [emitted]  
 fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf?6f0a76321d30f3c8120915e57f7bd77e  10.8 KiB            [emitted]  
fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff?2fad952a20fbbcfd1bf2ebb210dccf7a  6.02 KiB            [emitted]  
                                            images/401.gif?089007e721e1f22809c0313b670a36f1   160 KiB            [emitted]  
                                            images/404.png?a57b6f31fa77c50f14d756711dea4158  95.8 KiB            [emitted]  
                                      images/404_cloud.png?0f4bc32b0f52f7cfb7d19305a6517724  4.65 KiB            [emitted]  
           images/vendor/tui-editor/dist/tui-editor-2x.png?b4361244b610df3a6c728a26a49f782b  23.9 KiB            [emitted]  
              images/vendor/tui-editor/dist/tui-editor.png?30dd0f529e5155cab8a1aefa4716de7f  10.6 KiB            [emitted]

分开打包

mix.js('resources/backend/main.js', 'public/js').extract(['vue', 'axios']);

添加随机参数，保障文件更新

if (mix.inProduction()) {mix.version();
}

最终 `admin.blade.php`

<!doctype html>
<html lang="{{app()->getLocale()}}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{csrf_token() }}">
    <title>title</title>
</head>
<body>
<div id="app"></div>
<script src="{{mix('/js/manifest.js') }}"></script>
<script src="{{mix('/js/vendor.js') }}"></script>
<script src="{{mix('/js/main.js') }}"></script>
</body>
</html>

最终 `webpack.mix.js`

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

Mix.listen('configReady', (webpackConfig) => {
  // Exclude 'svg' folder from font loader
  let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/));
  fontLoaderConfig.exclude = /(resources\/backend\/icons)/;
});

mix.webpackConfig({
  resolve: {
    alias: {'@': path.resolve(__dirname, 'resources/backend'),
    }
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [path.resolve(__dirname, 'resources/backend/icons/svg')],
        options: {symbolId: 'icon-[name]'
        }
      }
    ],
  }
}).babelConfig({plugins: ['dynamic-import-node']
});

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

mix.js('resources/backend/main.js', 'public/js').extract(['vue', 'axios']);

if (mix.inProduction()) {mix.version();
}

一定要多查看文档，在文档不能满足的情况下，多进行检索查询。尤其是图标无法显示这个问题，我在 QQ 群、Gitter 上也有过咨询，没人回复。

还有，就是多多尝试。像图标这个问题，我也是多次打印 webpacke config 输出与原框架包中的输出做比较。

附上仓库地址 https://github.com/Honvid/lar…

just do it.

Laravel-58集合-vueelementadmin-踩坑记

创建 Laravel 项目

下载 vue-element-admin

初始化 package

复制文件

安装前端依赖

添加打包语句

添加入口文件

配置路由映射

配置 nginx

启动

问题集合

别名 `@` 未定义

卡在 `70%` 无法继续

sass 中 `/deep/` 解析失败

mock 资源无法加载

bable 失败

图标不显示

简单优化

最终 `admin.blade.php`

最终 `webpack.mix.js`

总结

Just My Socks（注册教程内含优惠码）

Laravel-58集合-vueelementadmin-踩坑记

创建 Laravel 项目

下载 vue-element-admin

初始化 package

复制文件

安装前端依赖

添加打包语句

添加入口文件

配置路由映射

配置 nginx

启动

问题集合

别名 @ 未定义

卡在 70% 无法继续

sass 中 /deep/ 解析失败

mock 资源无法加载

bable 失败

图标不显示

简单优化

最终 admin.blade.php

最终 webpack.mix.js

总结

Just My Socks（注册教程 内含优惠码）

别名 `@` 未定义

卡在 `70%` 无法继续

sass 中 `/deep/` 解析失败

最终 `admin.blade.php`

最终 `webpack.mix.js`

Just My Socks（注册教程内含优惠码）