Vue3单文件入口项目本地调试优化-webpack转vite方案总结

背景

换了部门，接手了一个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 项目，需要先升级，否则项目启动会产生如下报错：

js 复制代码

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文件

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插件

js 复制代码

//安装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命令行

js 复制代码

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
      ...
      "serve-vite": "vite",
      "build-vite": "vite build",
      "preview-vite": "vite preview"
  },
  ...
}

4. 关于webpack和vite获取环境变量写法不同的兼容

js 复制代码

//webpack写法
procsss.env.xxx 
//vite写法
import.meta.env.xxx

注意：如果在想在vite中让procsss.env.xxx这种写法生效的话，需要用到vite配置中的define属性具体配置如下：

js 复制代码

//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

js 复制代码

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工具探索

wp2vite

js 复制代码

npx wp2vite --config=./vue.config.js

wp2vite会自动生成vite.config.js和index.html文件，以及相关依赖。

总结问题：

wp2vite生成的vite.config.js配置基本上是复制vue.config.js文件的内容，需要手动更改，例如代理配置、define配置等。
以上述项目为例，wp2vite自动安装的依赖会出现版本不兼容的问题。

感受：读取并转换的配置较少，会生成部分配置（但这些配置不一定需要使用）