我们先下载安装
npm install amfe-flexible // CSS单位自适应转换插件 负责更改根font-size
npm install postcss-pxtorem// 如果版本过高可以降版本下载5.1.1版本 负责将px转成rem
我们先配置main.ts
import 'amfe-flexible';
我们在vite.config.ts里面配置一下代码写在plugins同级
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import postCssPxToRem from "postcss-pxtorem";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(),'src/assets/icons')],
// Specify symbolId format
symbolId:'icon-[dir]-[name]',
}),
],
resolve:{
alias:{
"@":path.resolve("./src") //相对路径别名配置,使用@代替src
}
},
css:{
preprocessorOptions:{
scss:{
javascriptEnabled:true,
additionalData:'@import "./src/styles/variable.scss";',
}
},
postcss:{
plugins:[
postCssPxToRem({
// 自适应
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
}),
]
}
},
server: {
proxy:{
'/api':{
changeOrigin:true,
rewrite:(path: string) => path.replace(/\api/,"")
}
}
},
base:'/music',
build:{
outDir:"music"
}
})