Question

我正在尝试使用webpack加载vue单个文件组件，但是它不起作用，它显示了以下内容而不是该组件：

<!--function(e,t,n,r){return rn(i,e,t,n,r, !0)}-->

这是我的index.html：

<html>
<body>
<div id="app">        
    <question></question>
    {{ parent }}
</div>
<script src="dist/app.min.js"></script>
</body>
</html>

webpack.config.js：

const path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: ['./assets/app.js'],

  output: {
    filename: 'app.min.js',
    path: path.resolve(__dirname, 'dist')
  }, 

  module: {
    rules: [

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }


    ]
  },

  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ],

  resolve: {
    alias: {
      vue: 'vue/dist/vue.min.js'
      }
  }

};

package.js：

{
  "name": "moderncss"      
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.12.0"
  }
}

app.js：

window.Vue = require('vue');
Vue.component("question", require("./components/Question.vue"));

new Vue({
 el:"#app",
 data:{
    parent:'parent data'
 }  
});

Question.vue：

<template>    
    <div>
        Question component 
    </div>      
</template>

我尝试添加一些父数据{{parent}}，并且显示正常，但问题出在组件上，这是怎么回事？谢谢。

Answer 1

尝试

"hive3-stream-autocreate-partition": "true",

Answer 2

vue的默认Webpack版本仅包括vue运行时，而不包括模板编译器。

因此<div id="app">的内容不会编译到渲染函数中。

如果无法在编译时编译所有模板，请通过编辑webpack.config.js使用包含编译后的版本：

alias: {
  'vue$': 'vue/dist/vue.esm.js'
}

但是在这种情况下，我建议将模板移到App.vue文件中。

// in app.js
import App from "./App.vue"
const app = new Vue(App)
app.$mount('#app')

。

// in App.vue
<template>
  <div>
    <question></question>
    {{ parent }}
  </div>
</template>

Vue单个文件组件无法使用Webpack正确加载

2 个答案: