在nuxt2如何将自己创建的文件夹里的.html文件打包到dist里?

本文介绍了如何在Nuxt.js项目中创建webpack.extend.js文件,以添加自定义loader规则,将HTML文件打包到指定路径。通过在nuxt.config.js中引入并合并这些配置,可以实现对privacy.html等文件的定制打包过程。
摘要由CSDN通过智能技术生成

首先,在你的项目根目录下创建一个build文件夹(如果不存在的话)。

在build文件夹中创建一个webpack.extend.js文件,并在其中添加以下代码[^1]:
 

const path = require('path')

module.exports = {
  build: {
    extend(config, { isDev, isClient }) {
      // 添加自定义的loader规则
      config.module.rules.push({
        test: /\.html$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'apps',
          publicPath: '_nuxt/apps'
        }
      })
    }
  }
}


在你的nuxt.config.js文件中引入webpack.extend.js文件,并将其添加到extend属性中:

const webpackExtend = require('./build/webpack.extend.js')

export default {
  // ...
  build: {
    extend(config, ctx) {
      // 合并自定义的webpack配置
      webpackExtend.build.extend(config, ctx)
    }
  }
}


现在,当你运行npm run build命令时,privacy.html文件将会被打包到dist/apps目录中。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值