背景
换了部门，接手了一个Vue3项目，这个项目使用webpack打包，进行本地调试和构建生产版本, 在本地开发调试时, 随着项目体积的增加, 基于js的webpack构建工具很快就遇到性能瓶颈, 通常需要几分钟甚至更长的时间才能启动开发服务器, 即使使用HMR, 变更也需要至少几秒甚至更久才能在浏览器中反映出来, 为了解决本地开发启动慢, 提升开发本地研发效率, 采用目前社区最新的比较流行的vite作为本地开发前端构建工具, 生产构建仍旧使用webpack方案构建。
准备工作
- Vite 需要 Node.js 版本 14.18+，16+。
- 必要插件：@vitejs/plugin-vue、@vitejs/plugin-vue-jsx（vue2 的项目对应使用的是 vite-plugin-vue2）
- 对于 vue3 的项目，因为 @vitejs/plugin-vue 要求 vue 在 3.2.25 版本以上，所以如果是 3.2.25 之前的 vue3 项目，需要先升级，否则项目启动会产生如下报错：
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
具体步骤
1. 项目根目录增加index.html和vite.config.js文件
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<link rel="icon" href="favicon.ico" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
2. 项目安装vite、@vitejs/plugin-vue、@vitejs/plugin-vue-jsx（jsx语法需要）、@vitejs/plugin-legacy插件
//安装vite
yarn add vite -D
//安装@vitejs/plugin-vue
yarn add @vitejs/plugin-vue -D
//安装@vitejs/plugin-vue-jsx
yarn add @vitejs/plugin-vue-jsx -D
//安装@vitejs/plugin-legacy
yarn add @vitejs/plugin-legacy -D
3.在package.json文件中增加vite命令行
{
"name": "xxxx",
"version": "0.1.0",
"private": true,
"scripts": {
...
"serve-vite": "vite",
"build-vite": "vite build",
"preview-vite": "vite preview"
},
...
}
4. 关于webpack和vite获取环境变量写法不同的兼容
//webpack写法
procsss.env.xxx
//vite写法
import.meta.env.xxx
注意：如果在想在vite中让procsss.env.xxx这种写法生效的话，需要用到vite配置中的define属性具体配置如下：
//vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
define:{
'process.env.NODE_ENV': '"development"',
'process.env.BASE_URL': '"/"',
...
}
})
5. 静态资源引入写法不同兼容
使用vite启动项目，发现一些静态资源报404
这种情况需要在vite.config.js文件中配置alias
import { defineConfig } from 'vite';
import path, { resolve } from 'path';
export default defineConfig({
resolve: {
alias: [
{
find: /^~/,
replacement: ''
},
{
find: '@',
replacement: path.resolve(__dirname, 'src')
},
{
find: '~@',
replacement: path.resolve(__dirname, 'src')
}
],
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
...
})
本地启动时间对比
原vue-cli启动时间
vite启动时间
webpack转vite工具探索
npx wp2vite --config=./vue.config.js
wp2vite会自动生成vite.config.js和index.html文件，以及相关依赖。
总结问题：
- wp2vite生成的vite.config.js配置基本上是复制vue.config.js文件的内容，需要手动更改，例如代理配置、define配置等。
- 以上述项目为例，wp2vite自动安装的依赖会出现版本不兼容的问题。
感受：读取并转换的配置较少，会生成部分配置（但这些配置不一定需要使用）
原文链接：https://juejin.cn/post/7355875083502862363 作者：不吃爆米花
