VUE JS 2 + WEBPACK 无法读取未定义 VUE RESOURCE 的属性“获取”

Posted 2023-02-22

【中文标题】VUE JS 2 + WEBPACK 无法读取未定义 VUE RESOURCE 的属性“获取”

【英文标题】：VUE JS 2 + WEBPACK Cannot read property 'get' of undefined VUE RESOURCE

【发布时间】：2017-04-21 08:26:54

【问题描述】：

我感到迷茫。

我在我的项目中使用了 vue-cli。 我已经安装了vuerouter。 一切都好。 我想在 vue 组件中使用视图资源，但我找不到它为什么不起作用。

这是我的 main.js（我正在使用 webpack）

import Vue from 'vue'
import VueRouter from 'vue-router'
var VueResource = require('vue-resource')

Vue.use(VueRouter)
Vue.use(VueResource)

const router = new VueRouter(
  routes: [
    path: '/',
    component: require('./components/index.vue')
  ,
  
    path: '/products/stock',
    component: require('./components/stock.vue')
  ,
  
    path: '/products/seo',
    component: require('./components/seo.vue')
  ,
  
    path: '/settings',
    component: require('./components/settings.vue')
  
  ]
)

new Vue(
  el: '#app',
  router,
  data: 
    message: 'Hello Vue!'
  ,
  mounted: () => 
    console.log("APP MOUNTED")
  ,
  render: h => h(require('./App.vue'))
)

当我去 /#/product/seo 有代码：

<template>
  <div id="app">
    Seo tabs du fastmanager  message 
    <input type="text" name="" v-model="message">
  </div>
</template>

<script>

export default 
  data: () => 
    return 
      message: "Hello buddy"
    
  ,
  mounted: () => 
    console.log("SEO MOUNTED")
    this.$http.get('/').then((response) => 
    // success callback
  , (response) => 
    // error callback
  );

  

</script>

<style lang="css">
</style>

我在 JS 控制台中遇到了这个错误。

seo.vue?468d:18Uncaught TypeError: Cannot read property 'get' of undefined(...)

Vue 资源在 ma​​in.js 中运行良好。

所以，我认为这是因为视图是在应用程序之前加载的。我不知道该怎么做。 对不起我的英语不好。

【参考方案1】：

好的，我找到了。

在我的 seo.vue 我把这个：

<template>
  <div id="app">
    Seo tabs du fastmanager
    <textarea type="text" name="" cols="40" rows="10" v-model="message"></textarea>
    <button type="button" v-on:click="test" name="button">Test</button>
  </div>
</template>

<script>
var Vue = require('vue')
export default 
  data: () => 
    return 
      message: "Coucou"
    
  ,
  mounted: function()
  
    console.log(this)

  ,
  methods: 
    test: function()
      Vue.http.get('https://jsonplaceholder.typicode.com/posts/1').then((response) => 
        console.log("SUCCESS",response);
        this.message = response
      , (response) => 
        console.log("ERROR",response);
        // error callback
      );
    
  

</script>

<style lang="css">
</style>

dit 工作正常。

【参考方案2】：

可能只是因为你没有安装 webpack 或删除 npm_modules 文件夹并使用 npm install 重新安装所有包，但 webpack 不在你的 package.lock.json 中