2022年6月6日vite编译显示插件弃用
postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration
解决方式：
1、安装新的postcss-px-to-viewport-8-plugin
npm install postcss-px-to-viewport-8-plugin --save-dev
其他配置如下
也可以新建：
module.exports = {
plugins: {
'postcss-px-to-viewport-8-plugin': {
unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: 750, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
// 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
// 下面配置表示类名中含有'keep-px'都不会被转换
selectorBlackList: ['keep-px'],
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw', // 横屏时使用的单位
landscapeWidth: 1338, // 横屏时使用的视口宽度
},
},
};
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';
const resolve = str => path.resolve(__dirname, str)
export default defineConfig(({ mode }) => {
const ENV = loadEnv(mode, __dirname)
const IS_DEV = ENV.VITE_APP_ENV !== 'production'
return {
base: './',
resolve: {
alias: {
'@': resolve('src'),
'@components': resolve('src/components'),
'@utils': resolve('src/utils'),
'@views': resolve('src/views'),
'@assets': resolve('src/assets')
},
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
build: {
// 公共路径(必须有的，不然打包css和js路径问题不加载)
publicPath: './',
// 打包构建输出路径
outDir: 'dist',
// 生成静态资源的存放路径
assetsDir: 'static',
// 构建后是否生成 source map 文件
sourcemap: IS_DEV,
// chunk 大小警告的限制
chunkSizeWarningLimit: 700,
// 生产环境移除 console
minify: 'terser',
terserOptions: {
compress: {
drop_console: !IS_DEV,
drop_debugger: !IS_DEV
}
},
rollupOptions: {
output: {
manualChunks: {
vlib: ['vue', 'vue-router', 'vuex']
}
}
}
},
server: {
port: 8088,
open: true,
proxy: {
'/api': 'http://127.0.0.1:3000'
},
cors: true
},
css: {
// 处理打包出现警告 "@charset" must be the first
postcss: {
plugins: [
/* require('postcss-px-to-viewport-8-plugin')({
* 2022年8月17日更新，使用require('postcss-px-to-viewport-8-plugin')引入
* vite报错：error when starting dev server:Error:
* Dynamic require of "postcss-px-to-viewport-8-plugin" is not supported
* 故此改为postcsspxtoviewport8plugin({
*/
postcsspxtoviewport8plugin({
unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: 1920, // 视窗的宽度，对应pc设计稿的宽度，一般是1920
// viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度
unitPrecision: 6, // 单位转换后保留的精度
propList: [
// 能转化为vw的属性列表
'*'
],
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: ['el-switch', 'is-checked'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。cretae
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
}),
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: atRule => {
if (atRule.name === 'charset') {
atRule.remove()
}
}
}
}
]
}
},
plugins: [
vue()
],
}
})
安装postcss-px-to-viewport，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fpostcss%2Fpostcss) 插件.
npm install postcss-px-to-viewport --save-dev
相应配置参数
{
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表
viewportUnit: "vw", // 指定需要转换成视窗单位
fontViewportUnit: "vw", // 字体使用的视窗单位
selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
mediaQuery: false, // 允许在媒体查询中转换`px`
minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
replace: true, // 是否直接更换属性值而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: "vw", // 横屏时使用的单位
landscapeWidth: 1134 // 横屏时使用的视窗宽度
}
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表
viewportUnit: "vw", // 指定需要转换成视窗单位
fontViewportUnit: "vw", // 字体使用的视窗单位
selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
mediaQuery: false, // 允许在媒体查询中转换`px`
minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
replace: true, // 是否直接更换属性值而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: "vw", // 横屏时使用的单位
landscapeWidth: 1134 // 横屏时使用的视窗宽度
评论 (0)