Vue CLI 3使用索引pug生成pug模板

Question

我使用Vue CLI 3内置于Webpack，我试图使用index.pug作为源索引模板，而不是默认的HTML。我想输出一个index.pug文件作为webpack进程的结果，以供节点服务器使用动态数据进行进一步填充。

这是我的vue.config.js

'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const resolve = (dir) => {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  outputDir: path.resolve(__dirname, 'server/app'),
  baseUrl: process.env.ENV === 'production' ? process.env.VUE_APP_CDN_URL + 'app/' : '/',
  configureWebpack: {
    context: path.resolve(__dirname, './'),
    entry: {
      app: './client/main.js'
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('client')
      }
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.pug',
        inject: true
      }),
    ]
  },
  chainWebpack: config => {
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-loader')
        .loader('pug-loader')
  }
}

令人遗憾的是，上述情况未能实现：

Error: Child compilation failed:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

一些想法和假设：

• configureWebpack的设置似乎正确(https://cli.vuejs.org/guide/webpack.html#chaining-advanced)
• HtmlWebpackPlugin可能不是要使用的插件，因为它的目的是生成HTML文件作为输出，但我甚至无法成功地完成它。

不幸的是，网上并没有很多关于这个主题的文档，所以希望能在这里得到帮助。谢谢。

Answer 1

可能不是一个直接的答案，但我们必须将生成的脚本添加到JSP中。另一种方法是使用ManifestPlugin并创建每个条目文件生成的资产列表，并将它们附加到index.pug中。

我有一个未解决的问题，但您可以使用他们的生成函数，想出以您喜欢的方式对资产进行骰子的方法。