Vue CLI 3 使用 index pug 生成 pug 模板

Question

我正在使用带有内置 Webpack 的 Vue CLI 3，并且我正在尝试使用 index.pug 作为源索引模板而不是默认的 HTML。我想输出一个 index.pug 文件作为 webpack 进程的结果，以便 Node 服务器进一步填充动态数据。

这是我的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。

我有一个未解决的问题，但您可以使用他们的 generate 函数来想出一些方法来按照您喜欢的方式对资产进行分割。