Это очень простая демонстрация, но она не дает ожидаемого результата.
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js',
},
output: {
filename: '[name].js',
path: resolve('/dist')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
),
loader: "babel-loader"
},
{
test: /(\.css$)/,
loaders: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
{
loader: 'style-loader!css-loader',
options: {
module: true
}
},
'stylus-loader'
]
},
{
test: /\.(png|jpg|gif|woff|woff2|eot|ttf)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192
}
}]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
}),
new VueLoaderPlugin()
]
};
webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: resolve("/dist")
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<noscript>
This is your fallback content in case JavaScript fails to load.
</noscript>
<div id="app">
</div>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.config.devtools = true
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
app.vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: () => {
return {
message: "Hello Vue.js!"
};
}
};
</script>
Наконец, результат такой: 
Я заметил, что app.js во встроенном проекте - это код с App.vue, но яне знаю, почему они не работают.И терминал не подскажет ошибку.Если вы хотите узнать больше деталей, вы можете оставить комментарий ниже.Наконец, спасибо за возможность ответить на этот вопрос.