vite使用总结
1、vite快速入门
- vite 处理 css 资源无需配置，直接导入 css 资源即可。
- vite 处理 less 资源，只需安装 less即可，无需配置，导入 less 资源即可。
- vite 处理 scss 资源，只需安装 sass 即可，无需配置，导入 scss 资源即可。
- vite 处理 stylus 资源，只需安装 stylus 即可，无需配置，导入 stylus 资源即可。
- vite 处理样式的浏览器前缀，需安装 postcss 和 post-preset-env，配置 postcss.config.js 即可。
// 安装依赖
npm install -D postcss post-preset-env
// postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')
]
}
- vite 处理 ts 资源无需配置，直接导入使用即可。
- vite 处理图片资源无需配置，直接导入使用即可。
- vite 处理 .vue 单文件组件。需要安装 @vitejs/plugin-vue ，并配置 vite.config.js。
// 安装依赖
npm isntall -D vue
npm install @vitejs/plugin-vue -D
// 配置 vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue()
]
}
// 如果报错 Error: Cannot find module 'node:xx' ， 则配置 package.json。
{
"type": "module"
}
//如果报错 [vite] Internal server error: Failed to load PostCSS config，则配置 postcss.config.js。
//修改 postcss.config.js -> postcss.config.cjs
- dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
- 生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程
2、vite中封装svg组件
// 1.安装：vite-plugin-svg-icons
// 2.vite.config.js中配置plugins
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 要缓存的图标文件夹
iconDirs: [path.resolve(__dirname, '../common/svgIcon/assets')],
// 执行 icon name 的格式
symbolId: 'icon-[name]'
})
]
}
// 3.编写svgIcon组件和批量导入代码
// 批量导入所有svg文件
import SvgIcon from './index.vue'
const files = import.meta.globEager('./assets/*.svg') // vite
const modules = {}
const requireAll = (files) => {
for (const key in files) {
if (Object.prototype.hasOwnProperty.call(files, key)) {
modules[key.replace(/(\.\/|\.svg)/g, '')] = files[key].default
}
}
}
requireAll(files)
export function registerSvgIconComp(app) {
app.component('SvgIcon', SvgIcon)
}
// 4.main.ts中执行批量到代码和vite-plugin-svg-icons
import { registerSvgIconComp } from '@rootCommon/svgIcon/svgIcon.ts'
import 'virtual:svg-icons-register'
// ...
registerSvgIconComp(app)
// 4.如果报错找不到fast-glob插件，安装插件
3、vite中动态导入
- 问题：vite中使用import(‘xx/xx.vue’)在dev模式正常，但是build时，会报错，需要改成import.meta.glob动态导入
- 方案：使用import.meta.glob代替
const modules = import.meta.glob('./dir/*.js')
// 以上将会被转译为下面的样子：vite 生成的代码
const modules = {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js')
}
// 支持多个路径导入
const modules = import.meta.glob(['./dir/*.js', './dir/*/*.js'])
4、vite模块联邦
- 使用vite-plugin-federation插件实现模块联邦，可以与 Webpack Module Federation 兼容，参考。
- 使用
- 步骤一：Remote端配置暴露的模块
此处ams-demo即为Remote端配置
// ams-demo的vite.config.js import federation from "@originjs/vite-plugin-federation"; export default { plugins: [ federation({ name: 'ams-demo', filename: 'remoteEntry.js', // 需要暴露的模块 exposes: { './Button': './src/Button.vue', './GswbjjList': './src/views/gswbjj/index.vue', './GswbjjAdd': './src/gswbjj/addView.vue', './FundOrg': './src/fund/index.vue' }, remotes: {}, shared: ['vue'] }) ] }- 步骤二：Host端配置远程模块入口
此处ams-base即为Host端
// vite.config.js import federation from "@originjs/vite-plugin-federation"; export default { plugins: [ federation({ name: 'host-app', // 依赖的远程模块 remotes: { // 注意：remotes对象的key为字符串 'ams-demo': 'http://localhost:8002/assets/remoteEntry.js' }, shared: ['vue'] }) ] }- 步骤三：Host端使用远程模块
<template> <div class="page-view home-page"> <!-- 测试vite模块联邦：<RemoteButton /> --> <RemoteButton /> </div> </template> <script> import { defineComponent } from 'vue' import RemoteButton from 'ams-demo/Button' export default defineComponent({ name: 'Home' components: { RemoteButton } }) </script>- 运行：1.对所有remote执行yarn build，然后yarn preview；对host执行yarn dev，即可在host中使用remote的组件
- 步骤一：Remote端配置暴露的模块
- 使用限制：
- remote只有build & preview模式运行才能被host读取到remoteEntry.js，无法在双方都处于dev模式进行模块联邦使用。
- Vite 使用 Webpack 组件相对容易，但是 Webpack 使用 vite-plugin-federation 组件时最好使用 esm 格式，因为其他格式暂时缺少完整的测试用例
5、打包报 Top-level await is not available in the configured target environment
- 问题：「ECMAScript」提案 Top-level await 由 Myles Borins 提出，它可以让你在模块的最高层中使用 await 操作符。在这之前，你只能通过在 async 函数或 async generators 中使用 await 操作符。Top-level await 是个新特性，打包不支持此特性
- 方案：引入vite-plugin-top-level-await
npm install vite-plugin-top-level-await -D
// 在vite.config.js配置此插件
import topLevelAwait from 'vite-plugin-top-level-await'
export default defineConfig({
plugins: [
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: '__tla',
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: i => `__tla_${i}`
})
]
})
6、vite中不支持require
- 问题：报错ReferenceError: require is not defined
- 解决方案：使用vite-plugin-require-transform
import requireTransform from 'vite-plugin-require-transform'
export default defineConfig({
plugins: [
vue(),
requireTransform({
// 支持require
fileRegex: /.js$|.vue$/
})
],
// ...
}
7、vite打包报错：“default“ is not exported by “node_modules/…
- 原因：vite不支持commonjs语法，需要使用@rollup/plugin-commonjs插件，用于将CommonJS模块转换为ES6模块的Rollup插件
- 解决方案：使用@rollup/plugin-commonjs插件
import commonjs from '@rollup/plugin-commonjs'
export default defineConfig({
plugins: [
commonjs(),
vue(),
// ...
}
使用rollup-plugin-visualizer插件，每次build都生成构建报告
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'
build: {
target: 'es2015',
outDir: env.VITE_OUT_DIR || 'dist',
sourcemap: env.VITE_SOURCEMAP === 'true',
rollupOptions: {
// VITE_USE_BUNDLE_ANALYZER为环境变量
plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
// 拆包
output: {
manualChunks: {
'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n'],
'element-plus': ['element-plus'],
'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue']
}
}
},
cssCodeSplit: !(env.VITE_USE_CSS_SPLIT === 'false')
},
8、vite中处理less全局变量
9、vite.config.ts详细配置
//vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
//项目根目录
root: process.cwd(),
//项目部署的基础路径
base: "/",
//环境配置 'development'|'production'
mode: "development",
//全局常量替换 Record感谢阅读！
今天就到这，下次想到再更新！么么哒～