Question

当我在如下所示的HTML文件中使用Vue时，它工作正常。

<body>
<div id="app">
  <!-- something in here -->
</div>
<script>
new Vue({
  el: "#app",
  data: function() {
  }
  //and so on ....
})
</script>
</body>

但是当我使用webpack来构建它时。我放入HTML标头中的输出js文件无法正确解析HTML。似乎Vue.js无法正常工作。

这是我的webpack配置文件和入口js文件。

/**
 * webpack.config.js
 */
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|ico)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    }
}

/**
 * index.js (the entry js file)
 */
import axios from "axios";
import Vue from "vue";

var baseUrl = "/activity/gqzq/AjaxGetList";

var vm = new Vue({
  el: "#app",
  data: function() {},
  //...... 
})

我的问题是，为什么输出文件不起作用？以及如何使其正确？

Answer 1

只需使用适当的官方工具，即可为您配置所有Webpack。

https://cli.vuejs.org/

为什么“ new Vue”不能与哪个webpack构建的输出javascript文件一起使用？

1 个答案: