如何在Nuxt/Vue/Webpack项目构建时剔除指定NPM包仅开发环境引入

完全可以实现，核心思路是通过环境变量区分开发/生产环境的依赖加载逻辑，配合预编译Tailwind静态样式的操作即可，以下是具体实现方案：

Nuxt 项目实现方案 #

前置准备 #

先将所有Tailwind相关依赖安装到开发依赖中，避免被打包到生产依赖：

npm install tailwindcss postcss autoprefixer -D

注意：需开启Tailwind JIT模式，提前扫描所有项目文件生成用到的静态样式，避免构建后样式丢失

配置修改 #

Nuxt3 配置

修改nuxt.config.ts，仅在开发环境加载Tailwind相关插件/模块：

export default defineNuxtConfig({
  // 方式1：直接配置postcss插件
  postcss: {
    plugins: {
      ...(process.env.NODE_ENV === 'development' ? { tailwindcss: {} } : {}),
      autoprefixer: {}
    }
  },
  // 方式2：如果使用@nuxtjs/tailwindcss模块，按如下配置
  modules: [
    ...(process.env.NODE_ENV === 'development' ? ['@nuxtjs/tailwindcss'] : [])
  ],
  // 生产环境直接引入预编译好的Tailwind静态CSS即可
  css: [
    '~/assets/css/tailwind-prebuild.css'
  ]
})

Nuxt2 配置

修改nuxt.config.js逻辑和上述一致，仅环境判断部分写法略有区别即可。

通用Webpack项目实现方案 #

所有基于Webpack的项目都可以用以下两种方式实现：

方式1：区分环境加载PostCSS插件 #

在PostCSS配置文件中判断环境，仅开发环境引入Tailwind插件：

// postcss.config.js
module.exports = {
  plugins: [
    ...(process.env.NODE_ENV === 'development' ? [require('tailwindcss')] : []),
    require('autoprefixer')
  ]
}

方式2：生产构建时忽略Tailwind模块 #

用Webpack内置的IgnorePlugin在生产阶段直接忽略Tailwind相关包的引入：

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  plugins: [
    ...(process.env.NODE_ENV === 'production' ? [
      new webpack.IgnorePlugin({
        resourceRegExp: /tailwindcss/
      })
    ] : [])
  ]
}

注意：提前执行npx tailwindcss build -o ./assets/css/tailwind-prebuild.css命令预编译所有用到的Tailwind样式到静态CSS文件，生产环境直接引入该静态文件即可，不需要再加载Tailwind运行时模块。

内容的提问来源于stack exchange，提问作者uncldrw