Webpack，Vue.js：无法编译Vue文件

Question

我对vue.js和webpack不熟悉，编译我的vue文件时遇到了麻烦。

我正在使用Spring boot和Pebble作为模板技术，并希望生成一个单独的.js文件并将其包含在我的index.pebble中。

这是我的webpack.config.js

  module.exports = {
    // This is the "main" file which should include all other modules
    entry: './src/main/resources/static/app/main.js',
    // Where should the compiled file go?
    output: {
        // To the `dist` folder
        path: './src/main/resources/static/lib',
        // With the filename `build.js` so it's dist/build.js
        filename: 'build.js'
    },
    module: {
        // Special compilation rules
        loaders: [
            {
                // Ask webpack to check: If this file ends with .js, then apply some transforms
                test: /\.js$/,
                // Transform it with babel
                loader: 'babel',
                // don't transform node_modules folder (which don't need to be compiled)
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    },
    vue: {
        loaders: {
            js: "babel-loader?presets[]=es2015,presets[]=stage-2"
        }
    },

}

我的 babelrc 文件：

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"]
}

我的文件包package.json

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "TODO",
  "scripts": {
    "watch-build": "echo \"not available\" && exit 1",
    "build": "npm install",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "LMFR",
  "readmeFilename": "README.md",
  "devDependencies": {
    "babel-core": "^6.1.2",
    "babel-loader": "^6.1.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-runtime": "^5.8.0",
    "webpack": "^1.12.2",
    "css-loader": "^0.23.0",
    "style-loader": "^0.13.0",
    "vue-loader": "^7.3.0",
    "vue-html-loader": "^1.0.0"
  },
  "dependencies": {
    "vue": "^2.3.2"
  }
}

这是我的main.js文件：

import Vue from 'vue' //import App from './app.vue'

new Vue({
    el: '#app',
    template: '<p>haaaa</p>'
})

我遇到的错误是：

build.js:494 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

- Seb

---

也许这可以帮助你尝试在Vue 2中使用此方法。 - Gerardo

正如错误提示所说，你不能在运行时构建中使用模板 :) - Belmin Bedak

@BelminBedak，你能告诉我更多吗？就像我说的一样，我对这些技术还很陌生。 - Seb

尝试将以下内容添加到模板中 - `render: h => return(<div id="app"><p>haaaa</p></div> )` - Belmin Bedak

@BelminBedak 没有更好的。 - Seb

Answer 1

请参考webpack-simple vue-cli模板，我认为你缺少一个依赖项：

https://github.com/vuejs-templates/webpack-simple/blob/master/template/package.json#L26

 "vue-template-compiler": "^2.2.1",

- mikeapr4

Answer 2

如果您只有运行时构建，则无法使用模板属性，而必须使用渲染函数或包含模板编译器。

尝试将main.js更改为：

import Vue from 'vue' //import App from './app.vue'

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement(
            'p',
            'haaaa'
        )
    }
})

JsFiddle 工作的代码片段

在使用Webpack时，.vue文件可以从<template></template>标签中编译，但主Vue根必须使用渲染函数，通常看起来像这样：

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement(
            App
        )
    }
})

- Justin MacArthur