前端 javascript npm vue3 + Ts + Vite移动端pc适配教程

使用步骤

1.首先安装两个插件lib-flexible和postcss-pxtorem npm i lib-flexible postcss-pxtorem -D

2.配置vite.config.ts（或者vite.config.js）

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import postCssPxToRem from "postcss-pxtorem"

export default defineConfig({

base:'/assetapp/',

plugins: [vue(), vueJsx()],

css:{

// 此代码为适配移动端px2rem

postcss: {

plugins: [

postCssPxToRem({

rootValue: 37.5, // 1rem的大小

propList: ['*'], // 需要转换的属性，这里选择全部都进行转换

})

]

}

resolve: {

alias: {

'@': fileURLToPath(new URL('./src', import.meta.url))

}

})

3.找到main.ts(或者main.js) 加入以下代码

import 'lib-flexible'

4.在index.html中加入以下meta，完整代码如下

金钥匙