Question

我第一次使用webpack时，我跟着this tutorial设置了依赖项并编写了一些测试代码，但没有结果如教程所示。感谢每一个人的帮助。

有相关代码：

webpack.config.js

var webpack = require('webpack');
module.exports = {
    entry: './app/main', // tell webpack to start from ./app/main.js
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    }
}

main.js

import Vue from 'vue';

import AppComponent from './components/app-component/app-component';
new Vue({
    el: '#app',
    components: {
        'app-component': AppComponent
    }
});

VueJs组件：

import Vue from 'vue';

const AppComponent = Vue.extend({
    template: '<h1>Hello World!</h1>'
});

export default AppComponent;

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Vue Twitter Streaming</title>
</head>
<body>
<div id="app">
    <app-component></app-component>
</div>
<script src="bundle.js"></script>
</body>
</html>

Answer 1

您正在使用带有字符串的template选项，这需要Vue编译器，但在使用import Vue from 'vue'时，它只导入Vue运行时。相反，您必须在Vue模块中导入文件dist/vue.esm.js，该模块也包括编译器。您必须将导入更改为：

import Vue from 'vue/dist/vue.esm';

或者，您可以使用网络包[{3}}来定义别名，因此当您导入vue时，它会导入vue/dist/vue.esm。

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

有关详细信息，请参阅resolve.alias。

您还可以将Runtime + Compiler vs. Runtime-only与.vue文件一起使用，这需要您配置Single File Components。有了它，你只需要运行时。

使用webpack打包时，javaScript没有运行

1 个答案: