问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

@vue/cli 4.5如何移除指定插件？

头像
热饭班长
    3.7k20240348

    更新：
    最终结果是该插件有依赖关系，想要删除html插件，需要连续删除多个，下面列出

    config.plugins.delete('preload');
config.plugins.delete('prefetch');
config.plugins.delete('html');

    分割线-----------------------------------------------------------------------------------------

    module.exports = {
  configureWebpack: {
    devtool: 'none', // 禁用生成.map文件
    optimization: {
      splitChunks: false, // 阻止抽离公共模块
    },
  },
  chainWebpack: (config) => {
    config.plugins.delete('copy');
    config.plugins.delete('html');
    config.plugins.delete('preload');
  },
};

    执行config.plugins.delete('preload')后，报错TypeError: Cannot read properties of undefined (reading 'tap')
    错误来源是\node_modules\@vue\preload-webpack-plugin\src\index.js:115:65
    也就是，我已经调用了删除该插件，但还是执行到了preload-webpack-plugin插件中，咋回事呢？删除无效吗？

    webpackvue-clijavascript前端vue.js
    阅读 1.8k
    avatarAI BotBETA

    在 Vue CLI 4.x 中，如果你想要移除特定的插件，你需要明确地指定你想要移除的插件的名称。对于你的情况，你想要移除 'html' 插件。

    不幸的是，直接在 vue.config.js 文件中删除或修改插件是不可能的，因为 Vue CLI 在构建过程中会直接使用插件的默认配置，不会考虑你的自定义配置。

    但是，你可以尝试以下方法：

    1. 自定义插件：创建一个自定义插件来替代 HTML 插件。这个插件可以什么都不做，这样在构建过程中，它就不会生成任何文件。
    // plugins/HtmlWebpackPlugin.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      // 你可以在这里设置你想要传递给 HTML 插件的任何选项，但是不要包含 'chunks' 和 'template'
    })],
};

    然后在你的 vue.config.js 中引用这个插件：

    // vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('./plugins/HtmlWebpackPlugin')],
  },
};
    1. 直接修改插件配置：你可以尝试直接修改 HTML 插件的配置以改变其行为。这需要你有对 HTML 插件源码的深入了解。你需要在你的 vue.config.js 中覆盖 HTML 插件的默认配置：
    // vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        chunks: [], // 不要包含 'index' 和 'favicon' 块
        template: undefined, // 移除模板选项，这样就不会生成 index.html 和 favicon.ico
      })],
  },
};

    请注意，这些方法都可能会影响到你的应用程序的行为，因此在使用这些方法之前，你应该确保你理解了这些选项的含义和可能的影响。

    1 个回答
    得票最新
    头像
    WillisYe
      1.2k1614

      想去掉打包时生成的index.html和favicon.ico文件
      可以build后再删掉就可以了
      方案1、package.json scripts 中build命令后面增加 && rimraf ./dist/index.html && rimraf ./dist/favicon.ico
      方案2、package.json scripts 中新增以下命令 "postbuild": "rimraf ./dist/index.html && rimraf ./dist/favicon.ico"
      上述两种方法都用到了rimraf，需要安装依赖 npm i -g rimraf

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题