使用 webpack 无法正确加载 Vue 单文件组件答案

【问题标题】：Vue single file components don't load properly using webpack使用 webpack 无法正确加载 Vue 单文件组件
【发布时间】：2018-10-30 02:19:42
【问题描述】：

我正在尝试使用 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'
 }  
});

问题.vue：

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

我尝试添加一些父数据 {{ parent }} 并且显示正常，但是组件有问题，发生了什么？谢谢。

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

试试

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

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

【讨论】：

【解决方案2】：

vue 默认的 webpack 版本只包含 vue 运行时，不包含模板编译器。

因此<div id="app">的内容不会被编译成render函数。

如果您无法在编译时编译所有模板，请通过编辑 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>

【讨论】：