鍍金池/ 問答/HTML/ 我的 vue 組件為什么沒有正常顯示？

我的 vue 組件為什么沒有正常顯示？

用 npm init 建了一個 webpack + vue 的項目，build運行沒發(fā)現有什么問題，但 vue 組件顯示不出來，不知為何，懷疑是不是配置的問題，煩請指教，謝謝。

代碼結構

├── dist
│?? ├── app.bundle.js
│?? ├── app.bundle.js.map
│?? ├── index.html
│?? ├── style.css
│?? ├── style.css.map
├── package.json
├── package-lock.json
├── src
│?? ├── App.vue
│?? ├── index.html
│?? └── index.js
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

dist 為輸出目錄，源代碼都在 src 下，webpack 配置文件有 webpack.dev.js 和webpack.prod.js，兩者擴展 webpack.common.js 的基礎配置。

index.js 內容

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

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
});

App.vue 內容

<template>
  <div id="app">
      <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style>
    html {
        background: #333;
        color: #fff;
        font-size: 20px;
    }
</style>

index.html 內容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
</html>

打包輸出的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
  <link href="style.css" rel="stylesheet"></head>
  <body>
    <div id="app">
    </div>
  <script type="text/javascript" src="app.bundle.js"></script></body>
</html>

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin("style.css")
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ]
});

package.json

{
  "name": "fancy-clone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch --config webpack.dev.js",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^1.1.4",
    "vue": "^2.5.13",
    "vue-loader": "^13.6.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7",
    "webpack-merge": "^4.1.1"
  }
}
回答
編輯回答
脾氣硬

找到問題了，首先運行時瀏覽器有這么個告警：

[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.

網上搜了一下找到下面的解決辦法：
https://forum.vuejs.org/t/vue...

問題是：

This component use the local registration component as the spinners,
and the local registration component was not be pre-compiled when this
component be released, but your project use the Runtime-only build
version of Vue.js, it does not include the template compiler, the
warning will be thrown when the Vue.js try to render a uncompiled
template.

So there has a temporary solution to solve it, just change your Vue.js
version from Runtime-only to Runtime + Compiler, simply to do it in
your webpack configurations:

...
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}
...
2017年4月1日 20:53
編輯回答
真難過

顯示不出，有沒什么報錯？或者看看打包后的css,js路徑是否正確

2017年6月18日 02:26