vue2 项目 vite 升级笔记

VioletJack
655 阅读2分钟

今天成功将 vue2 项目的打包工具从 webpack 升级到了 vite，简单整理下。

vite

先来回忆下 vite 是什么？

  • 一个打包工具，开发环境的依赖通过 esbuild 构建，而源码通过 rollup 打包。
  • 一个命令行工具，有 vite、vite build、vite optimize、vite preview 四个命令，常用为前两者。
  • 一个开发调试服务

vite 如何打包

  • 根据 index.html 中的 ESM 模块，进行依赖追踪，并最终编译成浏览器识别的 JavaScript 文件。
  • vite 的入口是 html 文件，而不是 webpack 的 js 文件。

所以，使用 vite 的基本条件是

  • vite
  • 带有 ESM 模块的 html
  • 使用了 ES6 import 的 js 代码组。

vite 的扩展性

vite 的基本核心很简单，但是可扩展性也很强。这依赖于它的插件（plugin）能力。 另外，由于 vite 的打包是基于 rollup 的，所以也可以使用 rollup 的插件生态。

开始调整

安装

在功能一章中可知，vite 可以支持 vue2、vue2 jsx、sass 等这些项目中用到的功能。

逐个安装上。

{
  ...,
  "devDependencies": {
    "@vitejs/plugin-vue2": "^2.2.0",
    "@vitejs/plugin-vue2-jsx": "^1.1.0",
    "sass": "^1.32.6",
    "vite": "^4.3.9",
    "prettier": "^3.0.0",
  }
}

vite.config.js

使用 vite 需要创建配置文件来进行配置，在根目录下创建 vite.config.js。

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path'

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import vue2Jsx from '@vitejs/plugin-vue2-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/spa',
  plugins: [vue2(), vue2Jsx()], // 支持 vue2 和 vue2 jsx
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)), // 别名，支持 @/views/ xxx 的写法
    },
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'], // 导入时想要省略的扩展名列表
  },
  build: {
    rollupOptions: {
      // rollup 多入口配置
      input: {
        index: resolve(__dirname, './index.html'),
        orange: resolve(__dirname, './orange.html'),
      },
    },
  },
  // 开发服务配置
  server: {
    port: 8081,
    proxy: {
      '/newAuth': 'http://pre.gdata.com',
    },
  },
})

入口文件更改

将 public 总的 html 文件放到根目录下，并且将 <%= BASE_URL %> 这种 webpack 模板写法给替换掉。最后用 ESM 模块的写法导入 js 入口文件。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="icon" href="/favicon.ico" />
    <link
      rel="stylesheet"
      href="/iconfont/font_20230621/iconfont.css"
    />
    <title>GData</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.default.js"></script>
  </body>
</html>

JSX 支持

在编译的时候，发现还是报 JSX 编译的错误。但我明明安装了 JSX 的插件了啊。随后在网上找到了问题所在 —— 需要为 JSX 代码加上 lang="jsx"。

<script lang="jsx">
  // jsx code
</script>

require 写法报错

另外，还遇到了一个 var imgUrl = require('@/assets/avatar.png') 这样的写法报错的情况，这是因为 require 写法并不是 vite 支持的语法。需要调整文件路径。

最后

小结一下，升级步骤为：

  • 安装 vite 及其相关插件
  • 使用 vite.config.js 替换 vue.config.js
  • 使用 html 文件作为入口文件
  • 解决 JSX 编译问题
  • 解决其他 Vite 和 Webpack 的差异，逐步稳定项目。

升级完成后，项目的打包速度快了 3 倍之多，而且开发过程中的编译也变得极其流畅。

avatar
文章
阅读
粉丝