vite
fighting_sunnyGirl
这个作者很懒,什么都没留下…
展开
-
vite中配置autoprefixer前缀追加以及flexbug修复
安装插件yarn add postcss postcss-modules postcss-flexbugs-fixes -D方案一,在vite.config.js中配置*css.postcss类型: string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })*内联的 PostCSS 配置(格式同 postcss.config.js),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。其路径搜索.原创 2021-08-16 11:46:54 · 5966 阅读 · 1 评论 -
vite中别名配置
配置vite.config.jsimport path from 'path'export default defineConfig({ resolve: { extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.sass', '.scss'], alias: { '@': path.resolve(__dirname, 'src'), '@components': path.resolve.原创 2021-08-16 11:26:01 · 1372 阅读 · 6 评论 -
vite中css模块化以及支持less等预编译
配置vite.config.js文件,无需安装任何插件-关于css的都在css模块下面进行配置import path from 'path'export default defineConfig({ css:{ //* css模块化 modules: { // css模块化 文件以.module.[css|less|scss]结尾 generateScopedName: '[name]__[local]___[hash:base64:5]', hashPre..原创 2021-08-16 11:20:11 · 9542 阅读 · 2 评论 -
vite中antd、antd-mobile等按需引入配置
重要插件vite-plugin-import yarn add vite-plugin-import -D配置vite.config.js文件import createImportPlugin from 'vite-plugin-import'export default defineConfig({ plugins:[ createImportPlugin({ onlyBuild: false,//是否只需要在生产环境中使用 babelImportPl.原创 2021-08-16 11:05:38 · 2549 阅读 · 1 评论 -
vite打包后的文件提供传统浏览器兼容性支持
vite 为打包后的文件提供传统浏览器兼容性支持安装主要插件yarn add @vitejs/plugin-legacy -DVite 的默认浏览器支持基线是Native ESM。此插件为不支持本机 ESM 的旧版浏览器提供支持。*默认情况下,此插件将: *为最终包中的每个块生成相应的遗留块,使用@babel/preset-env 转换并作为SystemJS 模块发出(仍然支持代码拆分!)。 *生成一个包含 SystemJS 运行时的 polyfill 块,以及由指定的浏览器目标和包原创 2021-08-16 10:56:58 · 11565 阅读 · 11 评论 -
vite+@loadable/component配置路由动态导入
vite项目中@loadable/component实现路由动态导入关键知识点 import.meta.glob Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块 const modules = import.meta.glob('./dir/*.js')代码配置import React from 'react'import loadable from '@loadable/component'const modules = import.meta.gl原创 2021-08-16 10:37:01 · 2082 阅读 · 0 评论