Vue 2和Vue-Resource [無法讀取undefined（...）]的屬性'get'

使用Broswerify和Vueify最近升級到Vue-2。在主應用程序中，我不得不要求vue/dist/vue.js而不是'vue'，因爲我沒有使用Webpack，但是現在當我使用Vue.use(require('vue-resource'));時，我得到$ http是未定義的。 Vue1這工作順利。我錯過了什麼與Vue-2合作？Vue 2和Vue-Resource [無法讀取undefined（...）]的屬性'get'

錯誤：

Uncaught TypeError: Cannot read property 'get' of undefined(…)

Main.js：

require('./bootstrap'); 
var Vue = require('vue/dist/vue.js'); 
Vue.use(require('vue-resource')); 

// var amazon = require('amazon-affiliate-api'); 

/** 
* Next, we will create a fresh Vue application instance and attach it to 
* the page. Then, you may begin adding components to this application 
* or customize the JavaScript scaffolding to fit your unique needs. 
*/ 


new Vue({ 
    el: '#wrapper', 
    mounted: function() { 
     //use mounted instead of ready. 
     this.getHttp('/test', this.successFetch); 
    }, 
    data: { 
    }, 
    methods: { 
     successFetch: function (results) { 
      console.log(results); 
     }, 
     //vue resource methods 
     getHttp: function (url,callback) { 
      const params = { 
       headers: { 
        'X-CSRF-TOKEN': this.token 
       } 
      } 
      this.$http.get(url, params).then(callback).catch(err => console.error(err)); 
     },

Gulp.js：

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

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


elixir(function(mix){ 
    mix.sass('main.scss') 
     .browserify('app.js'); 
});

的package.json：

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "aliasify": "^2.1.0", 
    "bootstrap-sass": "^3.3.7", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0", 
    "laravel-elixir": "^6.0.0-14", 
    "laravel-elixir-vue-2": "^0.2.0", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.16.2", 
    "vue": "^2.0.1", 
    "vue-resource": "^1.0.3", 
    "vueify": "^9.3.0" 
    }, 
    "dependencies": { 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "browserify": "^13.1.1" 
    } 
}

來源

2016-11-18 Ricki Moore

如果您只是希望將此設置爲SPA（不一定使用laravel），那麼建議您在項目腳手架上尋找vue-cli。

在cli中，您會發現一個簡單和更高級的browserify設置。

如果腳手架簡單的版本，並添加VUE資源：npm install vue-resource -save--dev

然後，你可以調整你的main.js設置如下：

import Vue from 'vue' 
import VueResource from 'vue-resource' 
import App from './App.vue' 

Vue.use(VueResource) 

new Vue({ 
    el: '#app', 
    render: h => h(App), 
    mounted() { 
     this.getHttp('/') 
    }, 
    methods: { 
     getHttp (url) { 
      this.$http 
       .get(url) 
       .then(response => console.log(response)) 
       .catch(err => console.error(err)) 
     }, 
    }, 
})

應用程序組件只是從默認cli build

如果您正在爲laravel構建，那麼在Package.json中有大量冗餘模塊，您可以使用laravel elixir vueify。有一個關於npmjs對Vue公司2.0叉子（還未曾嘗試過）：

npm install laravel-elixir-vueify-2.0

我假設你遇到由不被使用時仙丹包的需要所引起的問題建立你的app.js輸出。例如laravel-elixir-vue-2就是一個webpack構建 - 所以可能沒有做任何事情。

簡化吞設置爲：

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

require('laravel-elixir-vueify-2.0'); 

elixir(function(mix) { 
    mix.sass('main.scss') 
     .browserify('main.js'); 
});

理論上你再是建立正確的輸出，並使用Vue公司2.0軟件包來構建它。如果你把它和上面的vue-cli結合起來，你應該能夠使用久經考驗的代碼來支撐這些早期階段，使故障排除變得更容易。

來源

2016-11-18 07:55:54 GuyC

感謝VueCli幫了大忙。我仍然有一些簡單的瀏覽器問題。最後，我只使用他們擁有的browswerify版本。 –

是的，我使用它很多，因爲它確實給你一個非常穩固的起點 - 祝你好運！ – GuyC

我固定的模式如下這個問題：

npm install bootstrap-vue --save 
npm install vue-resource --save

在main.js

import { Vue, i18n } from './bootstrap' 
import BootstrapVue from 'bootstrap-vue' 

Vue.use(BootstrapVue)

創建bootstrap.js

import Vue from 'vue' 
import VueResource from 'vue-resource' 

Vue.use(VueResource) 

export { Vue }

在應用程序。vue

this.$http.get('/api/module/all').then(...

來源

2017-11-15 05:17:15

Vue 2和Vue-Resource [無法讀取undefined（...）]的屬性'get'

回答

相關問題