Когда я использую Vue в HTML-файле, как показано ниже, он работает нормально.
<body>
<div id="app">
<!-- something in here -->
</div>
<script>
new Vue({
el: "#app",
data: function() {
}
//and so on ....
})
</script>
</body>
Но когда я использую webpack, чтобы построить его. Выходной файл js, который я поместил в заголовок HTML, неправильно анализирует 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() {},
//......
})
Мой вопрос: почему выходной файл не работает? И как правильно это сделать?