vue3+vite項(xiàng)目H5配置適配步驟詳解
更新時(shí)間：2023年10月26日 10:14:14 作者：張旭超
這篇文章主要為大家介紹了vue3+vite項(xiàng)目H5配置適配步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
vue3+vite項(xiàng)目配置適配H5
安裝插件
主要安裝一下兩個(gè)插件：
- amfe-flexible（主要用于動(dòng)態(tài)設(shè)置根元素字體大小(rem)，以根據(jù)屏幕尺寸進(jìn)行自適應(yīng)布局）
- postcss-px-to-viewport-8-plugin（將px單位轉(zhuǎn)換為rem）
開(kāi)始配置
第一步、安裝amfe-flexible插件
cnpm install amfe-flexible --save
第二步、在main.js中導(dǎo)入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'amfe-flexible'
createApp(App).mount('#app')第三步、安裝postcss-px-to-viewport-8-plus
cnpm install postcss-px-to-viewport-8-plugin --save
第四步、配置vite.config.ts文件
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認(rèn)為"px"
viewportWidth: 390, // 設(shè)計(jì)稿的視口寬度
unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
viewportUnit: 'vw', // 希望使用的視口單位
fontViewportUnit: 'vw', // 字體使用的視口單位
selectorBlackList: [], // 需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。
minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換
mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
replace: true, // 是否直接更換屬性值，而不添加備用屬性
exclude: undefined, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會(huì)被轉(zhuǎn)換
landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
landscapeWidth: 390 // 橫屏?xí)r使用的視口寬度
})
]
}
}
})以上就是vue3+vite項(xiàng)目H5配置適配步驟詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 vite適配H5配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue3如何獲取來(lái)源路由問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
詳解Vue-cli來(lái)構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來(lái)構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
基于Vue3+element-plus實(shí)現(xiàn)中英文切換功能
在?Vue?3?項(xiàng)目中結(jié)合?vue-i18n?和?Element?Plus?實(shí)現(xiàn)中英文切換是一個(gè)常見(jiàn)的需求,下面是一個(gè)詳細(xì)的步驟指南,幫助你完成這個(gè)任務(wù),需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
今天小編就為大家分享一篇vue項(xiàng)目引入字體.ttf的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue進(jìn)階構(gòu)造屬性，從4個(gè)方面來(lái)進(jìn)行講解：Directive、Mixin 混入、Extends 繼承、provide 和 inject，感興趣的小伙伴們，趕快來(lái)看一下2021-05-05
vue項(xiàng)目打包清除console.log的四種方法總結(jié)
大家在項(xiàng)目開(kāi)發(fā)的時(shí)候,需要看看一些后端接口返回的結(jié)果,會(huì)多次使用console.log項(xiàng)目開(kāi)發(fā)完成打包的時(shí)候,發(fā)現(xiàn)控制臺(tái)一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包清除console.log的四種方法,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問(wèn)題解決的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06