1

我正在使用带有内置 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.

一些想法和假设：

不幸的是，关于此主题的在线文档并不多，因此希望在这里获得帮助。谢谢。

4

1 回答 1

0

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

我有一个未解决的问题，但您可以使用它们的生成功能来想出以您喜欢的方式切割资产的方法。

于 2019-01-17T06:30:38.540 回答