Laravel 5.4 版使用官方內建 Vue.js 入門開發的一些注意事項

Laravel 5.4 最明顯由原本的預設自動化整合由 gulp 更換為 webpack，

同時 Laravel Elixir 也換成 Laravel Mix，

並且也整合 Vue.js 至官方預設的 Component，

如果不用官方 VM 開發的話過程中真的蠻容易踩不少雷。

安裝

安裝過程不詳細贅述，詳見官方文件。

laravel new app
npm install

執行 npm run dev 遇到錯誤

ERROR  Failed to compile with 5 errors

These dependencies were not found in node_modules:

* ../fonts/bootstrap/glyphicons-halflings-regular.eot
* * ../fonts/bootstrap/glyphicons-halflings-regular.woff2
* * ../fonts/bootstrap/glyphicons-halflings-regular.woff
* * ../fonts/bootstrap/glyphicons-halflings-regular.ttf
* * ../fonts/bootstrap/glyphicons-halflings-regular.svg

主要是 bootstrap-scss load glyphicons fonts 發生路徑問題，

如果翻一下 node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss ，

在 81 行開始可以找到這邊，

// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

主要是 $icon-font-path 沒辦法正確的指定 bootstrap 正確的路徑，這個問題有三個解法，

• 啟用 bootstrap-scss 內建的修正 function (推薦)

  可以直接開啟 resources/assets/sass/_variables.scss 後新增

bootstrap-sass-asset-helper: true;

• 給予絕對路徑

  開啟 resources/assets/sass/_variables.scss 後新增一行指定 glyphicons 的絕對路徑

$icon-font-path: /path/of/app/node_modules/bootstrap-sass/assets/fonts/bootstrap/

• 取消整合 bootstrap

  開啟 webpack.mix.js 後，將 .sass('resources/assets/sass/app.scss', 'public/css'); 刪除

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.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

用範例的 Vue components 動不了

出現 Uncaught TypeError: Cannot read property 'csrfToken' of undefined

在 app.js (bootstrap.js) 被載入前預先在 Blade 內定義以下程式即可解決。

<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([ 'csrfToken' => csrf_token() ]); ?>

</script>

Blade 的程式碼大致上如下

<div id="app">
    <example></example>
</div>


<!-- Scripts -->
<script>
window.Laravel = <?php echo json_encode([ 'csrfToken' => csrf_token() ]); ?>
</script>

<script src="{{ asset('js/app.js') }}"></script>

問題在於如果沒有跑過 php artisan make:auth 的話，

在 Laravel 5.4 預設 resources/assets/js/bootstrap.js 內中有使用到 axios ，

其中注意 'X-CSRF-TOKEN': window.Laravel.csrfToken。

22 /**
23  * We'll load the axios HTTP library which allows us to easily issue requests
24  * to our Laravel back-end. This library automatically handles sending the
25  * CSRF token as a header based on the value of the "XSRF" token cookie.
26  */
27
28 window.axios = require('axios');
29
30 window.axios.defaults.headers.common = {
31     'X-CSRF-TOKEN': window.Laravel.csrfToken,
32     'X-Requested-With': 'XMLHttpRequest'
33 };

window.Laravel 則是是透過使用 make:auth 才會產生出的，

並且定義在 src/Illuminate/Auth/Console/stubs/make/views/layouts/app.stub 內，

引述官方文件

To use the component in your application, you may simply drop it into one of your HTML templates.
For example, after running the `make:auth` Artisan command to scaffold your application's authentication
and registration screens, you could drop the component into the home.blade.php Blade template

詳細的程式碼可以參考github commit