Webpack的方式改變

使用過5.2或5.3的可能使用過Laravel-elixir,預設會有一個gulpfile.js來使用laravel-elixir進行webpack

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

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for
 
 defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

在webpack的時候需要輸入命令$ gulp

然而在Laravel 5.4中使用的是Laravel-mix

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');

使用方式

要使用Laravel-mix，其實就是把自己建立的css檔案方法pulic/css目錄下，js檔案放到public/js中，注意的是要引入，當然css不容易出錯，但是js可能會出錯，後面會提到。

坑

使用Laravel-mixwebpack的方式和以往的Laravel-elixir不太相同，要使用的命令變成了$ (sudo) npm run dev，所以我們首先要確保npm以及nodejs的版本為最新，比如npm如果使用4.0.x的版本就會報錯。

/**
* npm更新到最新版本
*
*/
$ npm install npm@latest -g
or
$ cnpm install cnpm@latest -g

/**
* nodejs在Ubuntu下更新到最新版本
*
*/
筆者在寫這篇文章時nodejs穩定版已經到達了7.4.x了
但是如果使用Ubuntu16.10並且都update&&upgrade了之後的7.2.1也是毫無問題的
$ n stable
$ sudo rm /usr/local/bin/node
$ sudo ln -s /usr/local/n/versions/node/VERSION/node /usr/local/bin/node
VERSION要替換成自己下載好的資料夾檔名

Vue cannot read property ‘post’

如果你沒有做出任何設定，那麼如果你在程式碼中存在this.$http.post這樣的程式碼，很有可能會報錯
cannot read property 'post' of undefined

解決方法

• 安裝vue-resource並且在bootstrap.js中使用

$ npm install vue-resource

/**
* bootstrap.js
*
*/

require('vue-resource');

更多請檢視我的部落格
by vampirebitter