Vue CLI 3 с использованием индексного мопса для генерации шаблона мопса

Я использую Vue CLI 3 со встроенным Webpack, и я пытаюсь использовать 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)
  • HtmlWebpackPlugin, возможно, не является плагином для использования, поскольку его целью является создание HTML-файла в качестве вывода, но я даже не могу заставить его завершиться успешно

К сожалению, по этой теме в Интернете не так много документации, поэтому надеемся на помощь здесь. Благодарю.

1 ответ

Вероятно, не прямой ответ, но нам пришлось добавить сгенерированные сценарии в JSP. Альтернативой является использование ManifestPlugin, создание списка сгенерированных ресурсов для каждого файла ввода и добавление их в index.pug.

У меня есть открытая проблема, но вы можете использовать их функцию создания, чтобы придумать способы нарезать активы так, как вы предпочитаете.

Другие вопросы по тегам