Laravel 5.4中使用Vuejs的坑
阿新 • • 發佈:2019-02-12
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
webpack.mix.js
可以發現使用了ES6的語法
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-mix
webpack的方式和以往的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