Vue 2 和 Vue-Resource [无法读取 undefined(...) 的属性 'get']答案

【问题标题】：Vue 2 and Vue-Resource [Cannot read property 'get' of undefined(…)]Vue 2 和 Vue-Resource [无法读取 undefined(...) 的属性 'get']
【发布时间】：2017-04-01 17:56:07
【问题描述】：

最近使用 Broswerify 和 Vueify 升级到 Vue-2。在主应用程序中，我必须要求vue/dist/vue.js 而不是'vue'，因为我没有使用Webpack，但是现在当我使用Vue.use(require('vue-resource')); 时，我得到$http 是未定义的。 Vue1 这工作顺利。让这个与 Vue-2 一起工作我缺少什么？

错误：

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

包.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"
  }
}

【问题讨论】：

标签： javascript vue.js browserify vue-resource

【解决方案1】：

如果您只是想将此设置为 SPA（不一定使用 laravel），那么在为您的项目搭建脚手架时，我建议您查看 vue-cli。

在 cli 中，您会发现一个简单且更高级的 browserify 设置。

如果你脚手架简单版本并添加vue-resource：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))
        },
    },
})

App 组件只是 cli 构建中的默认组件

如果您正在为 laravel 构建，那么您在 Package.json 中有许多冗余模块，您可以考虑使用 laravel elixir vueify。在 npmjs 上有一个 Vue 2.0 的分支（从未尝试过）：

npm install laravel-elixir-vueify-2.0

我假设您遇到的问题是由于在构建 app.js 输出时需要 elixir 未使用的软件包引起的。 laravel-elixir-vue-2 例如是一个 webpack 构建 - 所以可能什么也没做。

将您的 gulp 设置简化为：

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 结合使用，您应该能够使用久经考验的代码来搭建这些早期阶段，从而使故障排除变得更加容易。

【讨论】：

感谢 VueCli 帮了大忙。我仍然对简单的 browserify 有一些问题。最后我只使用他们拥有的 browswerify 版本。
是的，我经常使用它，因为它确实为您提供了一个非常可靠的起点 - 祝您一切顺利！
@GuyC 也许你可以帮助我。看看这个：stackoverflow.com/questions/52529345/…

【解决方案2】：

我修复了以下模式的这个问题：

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 }

在 App.vue 中

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

【讨论】：