Why "new Vue" not working with output javascript file which webpack build?

Question

When I use Vue in an HTML file like below, it works fine.

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

But When I use webpack to build it. The output js file which I put in HTML header does not parse the HTML correctly. And seems Vue.js is not working.

Here are my webpack config file and entry js file.

/**
 * 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() {},
  //...... 
})

My question is, Why the output file is not working? And how to make it right?

user9993 · Accepted Answer · 2019-07-10 11:54:32Z

2

Just use the proper official tools, all the Webpack is configured for you.

https://cli.vuejs.org/

answered Jul 10, 2019 at 11:54

user9993

6,23912 gold badges61 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

583921970qqcom Over a year ago

I know I can use cli, But I want to know which part did I do wrong

Grzegorz T. Over a year ago

Missing vue-loader, vue-loader/lib/plugin, devServer and many other things in webpack.config.js Create a project by vue-cli and compare what you are missing is the best way to learn.

Collectives™ on Stack Overflow

Why "new Vue" not working with output javascript file which webpack build?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related