1.vue3中不支持require,可以
npm i vite-plugin-require-transform --save-dev
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
plugins: [
vue(),
requireTransform({
fileRegex: /.js$|.vue$/
}),
],
2.会碰到一个说node版本不够的问题
解决方法是 nvm ls查看版本 再nvm use 版本号
3.vite5 安装 postcss-px-to-viewport 插件做自适应问题
npm i postcss-px-to-viewport
4.碰到问题:报路径问题,vite5路径 原本我是去导入写不安装插件的,报路径问题 ,所以现在直接用插件
import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw = pxtovw({
//这里是设计稿宽度 自己修改
viewportWidth: 1920,
viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度
viewportUnit: 'vw'
})
css: {
preprocessorOptions: {
scss: {
// charest:false,
additionalData: `@import './src/assets/scss/vaiable.scss';`
}
},
postcss: {
plugins: [loder_pxtovw]
}
}
5.全部代码如下
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtovw from 'postcss-px-to-viewport'
import requireTransform from 'vite-plugin-require-transform';
// import { resolve } from 'path'
const loder_pxtovw = pxtovw({
//这里是设计稿宽度 自己修改
viewportWidth: 1920,
viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度
viewportUnit: 'vw'
})
// const path =require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
requireTransform({
fileRegex: /.js$|.vue$/
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
// charest:false,
additionalData: `@import './src/assets/scss/vaiable.scss';`
}
},
postcss: {
plugins: [loder_pxtovw]
}
// postcss: {
// plugins: [
// require("postcss-px-to-viewport")({
// unitToConvert: "px", // 需要转换的单位,默认为"px"
// viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920
// viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度
// unitPrecision: 3, // 单位转换后保留的精度
// propList: [
// // 能转化为vw的属性列表
// "*",
// ],
// viewportUnit: "vw", // 希望使用的视口单位
// fontViewportUnit: "vw", // 字体使用的视口单位
// selectorBlackList: ['.min-'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。cretae
// minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
// mediaQuery: false, // 媒体查询里的单位是否需要转换单位
// replace: true, // 是否直接更换属性值,而不添加备用属性
// include: [/screen/, /sewageScreen/],
// exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
// })
// ]
// }
},
})