PurgeCSS

Vue

使用 vue CLI 插件

vue cli plugin purgecss

安装

如果您尚未安装 vue-cli 3，请首先按照此处提供的安装说明进行操作：https://github.com/vuejs/vue-cli

使用 vue-cli 3.0 生成项目

vue create my-app

在安装 PurgeCSS 插件之前，请确保提交或隐藏您的更改，以防您需要还原更改。

要安装 PurgeCSS 插件，只需导航到您的应用程序文件夹并添加 PurgeCSS。

cd my-app

vue add @fullhuman/purgecss

PurgeCSS 插件将生成一个 postcss.config.js 文件，其中配置了 PurgeCSS。然后，您可以修改 PurgeCSS 选项。

用法

以下是此插件设置的 PurgeCSS 选项

{
  content: [ `./public/**/*.html`, `./src/**/*.vue` ],
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
}