javascript - 使用 webpack 构建的 App.vue 似乎没有挂载到 index.html

问题描述

这是一个非常简单的演示，但它没有得到预期的输出。

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 的代码，但我不知道为什么它们不起作用。并且终端没有提示错误。如果您想了解更多详情，可以在下方发表评论。最后，感谢您能够回答这个问题。

标签： javascripthtmlvue.jswebpack

javascript - 使用 webpack 构建的 App.vue 似乎没有挂载到 index.html

问题描述

解决方案

推荐阅读