Vueはうまく読み込んだりレンダリングしますが、動作を停止します

Question

私はVueとWebpackを使ってアプリケーションを持っています。

webpack.common.js

const path = require('path') 
const CleanWebpackPlugin = require('clean-webpack-plugin') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = { 
    entry: { 
    app: path.resolve(__dirname, 'src/app.js') 
    }, 
    plugins: [ 
    new CleanWebpackPlugin(['dist']), 
    new HtmlWebpackPlugin({ 
     title: 'Production', 
     template: 'src/index.html' 
    }) 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
    } 
}; 

webpack.dev.js私が持っている前、私が開発したときに走ったいくつかのVueのコードで

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

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

：私はWebPACKのドキュメントからこの設定を持っていますwebpack-dev-serverを使用しています。

この設定でページを読み込むと、ページは補間されたパラメータでロードされ、指示がレンダリングされ（つまりv-for）、すべてが機能しなくなります（setIntervalを除く）、uiは更新されず、イベントはトリガーされませんハンドラー、何も。

index.htmlを

<div id="app" class="container"> 
     <div class="row"> 
      <div class="col"> 
       <div class="jumbotron"> 
        <h1 class="display-4">Title</h1> 
        <p class="lead"> 
         Lorem ipsum faciebat <i><b>'{{randomWord}}'</b></i>? 
        </p> 
       </div> 
      </div> 
     </div> 
</div> 

app.js

import Vue from 'vue'; 
import {mockedData} from './mocked-data'; 
import './components/search-bar'; 
import './components/word-cta'; 

var app = new Vue({ 
    el: "#app", 
    data: function(){ 
     const words = ["foo", "bar", "baz", "faz", "boo", "foz", "bor"] 
     let i = 0 
     const getRandomWord = function(){ 
      if(i == words.length - 1){ 
       i = 0 
      } else { 
       i += 1 
      } 

      return words[i] 
     } 

     const data = { 
      randomWord: words[0], 
      lastWords: mockedData, 
      result: "" 
     } 

     setInterval(function(){ 
      data.randomWord = getRandomWord() 
     }, 1700) 

     return data 
    }, 
    methods: { 
     onSearch: function(result){ 
      this.result = result; 
     } 
    } 
}) 

私は何が起こっているかの見当がつかない...コンソールは役立ちません。以下は出力されます：

vue.esm.js：8439、より良い 開発経験のためにVueのデベロッパーツールの拡張機能をダウンロード：https://github.com/vuejs/vue-devtools vue.esm.js：8449あなたが開発モードでのVueを実行しています。プロダクション用にデプロイする場合は、 プロダクションモードを有効にしてください。より多くのヒントに EDIT

https://vuejs.org/guide/deployment.htmlでください：

を私はただ問題はWebPACKのを使用してのVueをインポートすることであることに気づきました。私は私の.jsファイルを持っていると私のindex.htmlに

<script src="https://unpkg.com/vue"></script> 

を入れimport Vue from 'vue'; 行を削除した場合、問題は固定されており、期待通りJSは動作します。

誰かが理由を説明できますか？

Answer 1

あなたのwebpack設定ファイルにbabel-loaderがありませんでしたので、 "import"構文がwebpackによって認識されず、また 'vue/dist/vue.esm.js'を 'vue/dist/vue.common.js '。