# 相關(guān)配置版本:
laravel 5.1 LTS
laravel-elixir 3
vue 1.0.26
vue-router 2.0.0
vue-resources 1.0.3
Gunakan laravel-elixir
中自帶的browserify
編譯vue, vue-router, vue-resource
成功輸出js文件后,使用時(shí)報(bào)錯(cuò):Uncaught TypeError: Cannot read property 'use' of undefined
Sebahagian daripada fail js yang disusun adalah seperti berikut:
var Vue = require("vue");
var VueRouter = require('vue-router');
var VueResource = require('vue-resource');
Vue.use(VueRouter);
Vue.use(VueResource);
gulpfile.js
// 局部
elixir(function(mix) {
mix.browserify('index.js', 'public/dist/js/index.js');
mix.browserify('new.js', 'public/dist/js/new.js');
});
Soalan:
Dua fail yang disusun di atas adalah bergantung kepada require
配置是一樣的,index.js這個(gè)可以使用,而new.js這個(gè)則報(bào)錯(cuò),通過(guò)console.log()
分別查看各個(gè)依賴(lài),new.js
里的Vue
是undefined
Saya tidak tahu apakah sebab yang mungkin, atau bagaimana untuk mengetahui di mana masalahnya?
Cara menggunakan vue
這些依賴(lài)可以只需加載一次,不必一起打包在文件里,我配置了browser-shim
, tetapi ia nampaknya tidak berkesan. Saya tidak tahu sama ada saya salah menggunakannya atau sesuatu:
package.json
"browserify": {
"transform": [
"vueify",
"browserify-shim",
"stringify"
]
},
"browserify-shim": {
"bootstrap-sass": {
"depends": [
"jquery:jQuery"
]
},
"vue": "global:Vue"
}
Akhirnya menemui punca masalah (ungkapan: menangis) Vue
dalam index.js
boleh digunakan secara normal, manakala new.js
' s Vue
adalah undefined
Saya rasa ia tidak boleh memerlukan
beberapa kali, tetapi VueRouter, VueResource
juga mengulangi <. kod>memerlukan , tetapi ia tersedia Setelah memikirkannya berulang kali, saya teringat bahawa ia mungkin kerana terdapat ayat dalam package.json
yang menetapkan Vue<.> sebagai pembolehubah global, jadi saya menukar ayat Mengalih keluarnya, menyusunnya semula, dan mendapati ia berjaya (apa kesan sampingan separuh pengetahuan ==). Tetapan yang dikeluarkan adalah seperti berikut:
里寫(xiě)了一句把index.js
里的Vue
可正常使用,而new.js
的Vue
則是undefined
,猜測(cè)難道它不可以多次require
,但是VueRouter, VueResource
也重復(fù)require
了,卻是可用的,思索再三,想起可能是因?yàn)?code>package.jsonVue
設(shè)置成全局變量,于是將該句去掉,再次編譯,發(fā)現(xiàn)成功了(真是一知半解的副作用呀==)。去掉的那個(gè)設(shè)置如下:
"browserify-shim": {
...
"vue": "global:Vue"
}
PS:感謝朋友 Vicent Ye
rrreee
Vicent Ye
kerana membantu saya mencari masalah. ??