Vue加载并渲染良好，但随后停止工作

我有一个使用Vue和Webpack的应用程序。我从webpack文档中获得了这个配置：

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

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

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

在前面我有一些Vue代码，当我使用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 Devtools扩展以获得更好的开发体验： vue.esm.js：8449您正在开发模式下运行Vue。确保在部署生产时打开生产模式。在.html上查看更多提示

编辑：

我刚刚意识到问题是使用webpack导入Vue。如果我删除了我的.js文件中的import Vue from 'vue';行并放入

<script src=""></script>

在我的index.html上，问题得到解决，JS的行为符合预期。

有人可以解释原因吗？

我的假设是你错过了你的webpack配置文件中的babel-loader，因此“import”语法不能被webpack识别，你也应该将'vue / dist / vue.esm.js'改为'vue / dist / vue。 common.js'。

Vue加载并渲染良好，但随后停止工作

我有一个使用Vue和Webpack的应用程序。我从webpack文档中获得了这个配置：

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

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

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

在前面我有一些Vue代码，当我使用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 Devtools扩展以获得更好的开发体验： vue.esm.js：8449您正在开发模式下运行Vue。确保在部署生产时打开生产模式。在.html上查看更多提示

编辑：

我刚刚意识到问题是使用webpack导入Vue。如果我删除了我的.js文件中的import Vue from 'vue';行并放入

<script src=""></script>

在我的index.html上，问题得到解决，JS的行为符合预期。

有人可以解释原因吗？

我的假设是你错过了你的webpack配置文件中的babel-loader，因此“import”语法不能被webpack识别，你也应该将'vue / dist / vue.esm.js'改为'vue / dist / vue。 common.js'。