Javascript 将Grunt与VueJS一起使用
我一直在尝试使用Grunt&Browserify设置VueJS2,但始终遇到未定义模板或渲染函数的相同错误:Javascript 将Grunt与VueJS一起使用,javascript,gruntjs,vue.js,vuejs2,Javascript,Gruntjs,Vue.js,Vuejs2,我一直在尝试使用Grunt&Browserify设置VueJS2,但始终遇到未定义模板或渲染函数的相同错误:[Vue warn]:未能装载组件:未定义模板或渲染函数。 代码如下: Index.js: import Vue from 'vue'; import Router from 'vue-router'; import App from './components/App.vue' import Resource from 'vue-resource' import indexCompone
[Vue warn]:未能装载组件:未定义模板或渲染函数。
代码如下:
Index.js:
import Vue from 'vue';
import Router from 'vue-router';
import App from './components/App.vue'
import Resource from 'vue-resource'
import indexComponent from './components/index/template.vue'
Vue.use(Router)
Vue.use(Resource)
// route config
let routes = [
{
path: '/',
name: 'home',
component: indexComponent
},
{ path: '*', redirect: '/' }
]
// Set up a new router
let router = new Router({
routes: routes
})
// Start up our app
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
browserify: {
js: {
files: {
'src/assets/js/app.js': 'src/js/index.js'
},
options: {
debug: true,
bundleDelay: 1000,
transform: [ ["vueify"], ["babelify"] ]
}
}
},
{
"name": "testing",
"version": "0.1.0",
"description": "test",
"main": "src/index.js",
"license": "ISC",
"scripts": {
"test": "grunt test"
},
"browserify": {
"transform": [
"babelify",
"vueify"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^6.0.0",
"browserify": "^14.3.0",
"grunt": "^0.4.5",
"grunt-browserify": "^5.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.2.1",
"partialify": "^3.1.5",
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.5.3",
"vueify": "^9.4.1"
}
}
grunfile.js:
import Vue from 'vue';
import Router from 'vue-router';
import App from './components/App.vue'
import Resource from 'vue-resource'
import indexComponent from './components/index/template.vue'
Vue.use(Router)
Vue.use(Resource)
// route config
let routes = [
{
path: '/',
name: 'home',
component: indexComponent
},
{ path: '*', redirect: '/' }
]
// Set up a new router
let router = new Router({
routes: routes
})
// Start up our app
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
browserify: {
js: {
files: {
'src/assets/js/app.js': 'src/js/index.js'
},
options: {
debug: true,
bundleDelay: 1000,
transform: [ ["vueify"], ["babelify"] ]
}
}
},
{
"name": "testing",
"version": "0.1.0",
"description": "test",
"main": "src/index.js",
"license": "ISC",
"scripts": {
"test": "grunt test"
},
"browserify": {
"transform": [
"babelify",
"vueify"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^6.0.0",
"browserify": "^14.3.0",
"grunt": "^0.4.5",
"grunt-browserify": "^5.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.2.1",
"partialify": "^3.1.5",
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.5.3",
"vueify": "^9.4.1"
}
}
Package.json:
import Vue from 'vue';
import Router from 'vue-router';
import App from './components/App.vue'
import Resource from 'vue-resource'
import indexComponent from './components/index/template.vue'
Vue.use(Router)
Vue.use(Resource)
// route config
let routes = [
{
path: '/',
name: 'home',
component: indexComponent
},
{ path: '*', redirect: '/' }
]
// Set up a new router
let router = new Router({
routes: routes
})
// Start up our app
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
browserify: {
js: {
files: {
'src/assets/js/app.js': 'src/js/index.js'
},
options: {
debug: true,
bundleDelay: 1000,
transform: [ ["vueify"], ["babelify"] ]
}
}
},
{
"name": "testing",
"version": "0.1.0",
"description": "test",
"main": "src/index.js",
"license": "ISC",
"scripts": {
"test": "grunt test"
},
"browserify": {
"transform": [
"babelify",
"vueify"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^6.0.0",
"browserify": "^14.3.0",
"grunt": "^0.4.5",
"grunt-browserify": "^5.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.2.1",
"partialify": "^3.1.5",
"vue": "^2.3.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.5.3",
"vueify": "^9.4.1"
}
}
如果您
从“Vue”导入Vue,将不胜感激。代码>您将获得无法编译模板的仅运行时版本。当系统中找不到.vue文件的模板(SPA的HTML部分)时,会出现此错误,
在这种情况下,它可能是App.vue或template.vue
文件的格式必须为:
`<template>
</template>
<script>
export default{}
</script>
<style>
</style>`
`
导出默认值{}
`
“vue”是完整版本,但基于其文档。即使将grunt browserify中的别名设置为“vue”:“vue/dist/vue.common.js”仍然会导致相同的错误。找到解决方案了吗?