按照官方文件，進行安裝：
composer create-project --prefer-dist laravel/laravel laravel-vue-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/ 替換為 >>>。
mock 資源無法載入
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
bable 失敗
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();
}<!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>
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/laravel-vue-elem...
just do it.
本作品採用《CC 協議》，轉載必須註明作者和本文連結