Javascript Vue 2和Vue资源[无法读取未定义(…;)的属性';获取']]
最近使用Broswerify和Vueify升级到Vue-2。在主应用程序中,我需要Javascript Vue 2和Vue资源[无法读取未定义(…;)的属性';获取']],javascript,vue.js,browserify,vue-resource,Javascript,Vue.js,Browserify,Vue Resource,最近使用Broswerify和Vueify升级到Vue-2。在主应用程序中,我需要vue/dist/vue.js而不是'vue',因为我没有使用Webpack,但是现在我使用vue.use(require('vue-resource'))我得到$http未定义。Vue1这工作很顺利。使用Vue-2时,我缺少了什么 错误: 未捕获类型错误:无法读取未定义(…)的属性“get” Main.js: require('./bootstrap'); var Vue = require('vue/dist/
vue/dist/vue.js而不是'vue',因为我没有使用Webpack,但是现在我使用vue.use(require('vue-resource'))代码>我得到$http未定义。Vue1这工作很顺利。使用Vue-2时,我缺少了什么
错误:
未捕获类型错误:无法读取未定义(…)的属性“get”
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"
}
}
如果你只是想把它设置成一个水疗中心(不一定要使用laravel),那么我建议你在搭建你的项目的时候考虑一下
在cli中,您可以找到一个简单且更高级的browserify设置
如果构建简单版本并添加vue资源:npm安装vue资源-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构建中的默认组件
如果您是为laravel构建的,那么Package.json中有许多冗余模块,您可以使用它们。在NPMJ上有一个Vue 2.0分叉(从未尝试过):
npm安装laravel-elixir-vueify-2.0
我假设您遇到的问题是由于在构建app.js
输出时需要elixir未使用的包造成的<例如,code>laravel-elixir-vue-2就是一个网页包构建,所以可能什么都没做
简化您的吞咽设置,以:
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结合使用,您应该能够使用经过测试的代码构建这些早期阶段,从而使故障排除更加容易。我修复了以下模式的此问题:
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(...
谢谢,老兄,维克利帮了大忙。我仍然有一些问题与简单的浏览。最后,我只使用他们的浏览器版本。是的,我经常使用它,因为它确实给了你一个非常坚实的起点-祝你好运@也许你能帮我。看看这个: