vue3+vite适配浏览器+兼容安卓

1.下载

npm i -D postcss-pxtorem amfe-flexible

npm i autoprefixer

2. main.ts导入 

import 'amfe-flexible/index.js'

3.vite.config.ts中配置 

 import legacyPlugin from '@vitejs/plugin-legacy'    //兼容安卓低版本浏览器

import postCssPxToRem from 'postcss-pxtorem'

import autoprefixer from 'autoprefixer'

export default defineConfig({

export default defineConfig({

  plugins: [vue(),

    legacyPlugin({

      target:['chrome 43']

    })],

    css:{

      postcss:{

        plugins:[

          postCssPxToRem({

            rootValue:192,

            propList:['*']

          }),

          autoprefixer({

            overrideBrowserslist: [

                "Android 4.1",

                "iOS 7.1",

                "Chrome > 31",

                "ff > 31",

                "ie >= 8",

                // "last 10 versions"

            ],

            grid: true

        }),

        ]

      }

    },

  // 代理配置

  server:{

    port:3002,

    proxy: {

      '/api':{

        target:'http://xxxxx',

        changeOrigin:true,

        ws:true,

        rewrite:(path) => path.replace(/^\/api/,"")

      }

    }

  }

})

}）

//  适配图表需重新计算配置项中的数值,监听resize  背景图需background-size:100% 100%

图片需指定宽高

-- canvas适配时

canvas 宽高需根据当前屏幕宽度重新计算 

-- 配置二级目录

- env.development / production 文件中配置  VITE_BASE_PATH=/xxxxx/

-routes/index.ts中  

const router = createRouter({

    history:createWebHistory(import.meta.env.VITE_BASE_PATH),

    routes

})

package.json中配置二级目录打包路径

"build:base": "vite build --mode production --base",   

// 打包命令行输入 npm run build:base -- base /xxxx