Vue가 잘로드되고 렌더링되지만 작동을 멈 춥니 다.

Question

Vue 및 Webpack을 사용하는 응용 프로그램이 있습니다.

이

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.common.js 내가 개발 때 실행 일부 뷰 코드가 전면에

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

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

을 webpack.dev.js : 나는 웹팩 문서에서이 구성이 그것은 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> 

내가 무슨 일이 일어나고 있는지 아무 생각이 ... 콘솔은 도움이되지 않습니다를

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; 
     } 
    } 
}) 

을 app.js.

vue.esm.js : https://github.com/vuejs/vue-devtools vue.esm.js : 8439 더 나은 개발 경험에 대한 뷰 DevTools로 확장 다운로드 다음 출력은 8449 당신은 개발 모드에서 뷰를 실행하고 있습니다. 프로덕션을 위해 배포 할 때는 프로덕션 모드를 사용해야합니다. https://vuejs.org/guide/deployment.html

편집에 대한 자세한 도움말을 를 참조하십시오

난 그냥 문제가 뷰가 웹팩을 사용하여 가져 오는 것입니다 것을 깨달았다. 내의 .js 파일에 내가 가지고있는 import Vue from 'vue'; 줄을 제거하고 내 index.html을에

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

을 넣을 경우 문제는 고정되어 예상대로 JS 동작합니다.

누군가 설명 할 수 있습니까?

Answer 1

내 가정은 webpack 구성 파일에서 babel-loader를 놓쳤으므로 webpack에서 "import"구문을 인식 할 수 없으며 'vue/dist/vue.esm.js'를 'vue/dist. dist/vue.common.js '.