vue3+ts+vite PurgeCSS 打包失败
时间: 2023-08-08 12:09:48 浏览: 162
解决Vue打包上线之后部分CSS不生效的问题
在Vue 3 + TypeScript + Vite项目中使用PurgeCSS进行打包时,可能会遇到打包失败的问题。这通常是由于PurgeCSS与TypeScript的类型检查器发生冲突导致的。
要解决这个问题,可以尝试在Vite的配置文件中添加一个插件,用于在TypeScript类型检查完成后再运行PurgeCSS。以下是一个示例配置:
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import PurgeIcons from 'vite-plugin-purge-icons';
import PurgeCSS from '@fullhuman/postcss-purgecss';
import autoprefixer from 'autoprefixer';
import postcssImport from 'postcss-import';
export default defineConfig({
plugins: [
vue(),
PurgeIcons(),
{
name: 'postcss',
apply: 'build',
async transform(code, id) {
if (!/\.vue\?/.test(id)) {
return;
}
const postcssPlugins = [
postcssImport(),
autoprefixer(),
];
if (this.isProduction) {
postcssPlugins.push(PurgeCSS({
content: [id],
safelist: [
'html',
'body',
],
}));
}
const { css } = await require('postcss')(postcssPlugins).process(code, { from: id });
return {
code: css,
};
},
},
],
});
```
在这个配置中,我们使用Vite的插件系统来运行PostCSS。在PostCSS中,我们使用了PurgeCSS来清除未使用的CSS,但是只在生产环境中使用。在Vite的配置中,我们使用了一个名为`postcss`的自定义插件,并在`apply`选项中指定了它只在打包时运行。
在这个自定义插件中,我们首先检查文件是否为Vue文件,如果不是,直接返回。接下来,我们定义了PostCSS的插件列表,包括`postcss-import`和`autoprefixer`。如果在生产环境中,我们还会添加一个`@fullhuman/postcss-purgecss`插件来清除未使用的CSS。
最后,我们使用动态`require`语句来运行PostCSS,并返回处理后的CSS。这样,我们就可以在TypeScript类型检查完成后再运行PurgeCSS,避免了它们之间的冲突。
阅读全文