首页 文章

Vue 2和Vue-Resource [无法读取未定义的属性'get'(...)]

提问于
浏览
2

最近使用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');
});

的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"
  }
}

2 回答

  • 2

    如果您只是想将此设置为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 . 有's a fork for Vue 2.0 on npmjs (haven' t曾尝试过):

    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结合起来,你应该能够使用久经考验的代码来支撑这些早期阶段,以便更轻松地进行故障排除 .

  • 0

    我修复了以下模式的问题:

    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(...
    

相关问题