likes
comments
collection

基于 webpack 项目接入 vite 你可能需要注意的点

作者站长头像
站长
· 阅读数 9

前言

在之前的 如何优化你的 vue-cli 项目? 一文中介绍基于 webpack 进行的一些优化方法,本文的核心是基于一个 vue2 的项目(也就是上篇文章中的项目)来继续介绍一下如何接入 vite,以及这个过程中需要关注的点。

之前的优化是基于已有的 构建工具 进行的处理,现在相当于直接替换 构建工具,主要用于提升开发时的整体编译速度和效率,本身也是一个优化点。

本篇文章其实是之前的一个规划,但是一直没有落实,现在算是补回来吧!!!

集成 vite

vue 项目如何使用 webpack

如果你观察过你的 vue2 项目中的 package.json 文件,会发现其中和依赖相关的内容竟然没有 webpack,但是直接观察 node_modules 目录中的依赖,还是会发现 webpack 也作为依赖被安装了,那么 vue-cli 创建的项目其中的 webpack 到底在哪呢?

vue-cli-service 命令

其实,我们可以观察一下我们是如何启动项目的,也就是 package.json 文件中的 script 的脚本字段,如:

"scripts": {
    "dev": "cross-env API_ENV=dev vue-cli-service serve --mode dev",
    "build:test": "cross-env API_ENV=test vue-cli-service build",
    "build:prod": "cross-env API_ENV=prod vue-cli-service build"
 },

其中的 vue-cli-service 的命令就很显眼了,如果你自己尝试过用 node 开发过一些命令,那么就会知道像这样的命令一定是在某个库中使用 package.jsonbin 属性与对应文件的 Shebang 来实现的。

这里的 vue-cli-service 命令实际上是在 node_modules\@vue\cli-service\package.jsonnode_modules\@vue\cli-service\bin\vue-cli-service.js 中声明和定义的:

基于 webpack 项目接入 vite 你可能需要注意的点 基于 webpack 项目接入 vite 你可能需要注意的点

webpack 依赖

仔细观察 @vue/cli-service 相关的 package.json 中的依赖,会发现 webpack 是作为其的依赖:

基于 webpack 项目接入 vite 你可能需要注意的点

到这我们就知道了,虽没有显式的直接依赖 webpack,但本质上仍然是基于 webpack 的,感兴趣的可以自行了解 @vue/cli-service 相关源码。

项目集成 vite

知道了 vue2 的项目如何依赖于 webpack,那么接入 vite 时,我们就需要显式的安装依赖,不能像上述一样直接使用.

安装 vite 依赖

通过 npm install vite -D 为项目添加相关依赖,或者你可以通过其他方式添加.

创建 vite 配置文件

vue.config.js 的根目录下创建 vite.config.js 用于添加 vite 相关配置.

webpack 中通过 vue-loader 来处理 .vue 文件,而在 vite 不存在 loader 的概念,只有 plugin 的概念,因此需要通过 vite-plugin-vue2 这个插件来处理 .vue 文件

  • 安装对应插件:npm install vite-plugin-vue2 -D
  • vite.config.js 中配置插件:
    import { defineConfig } from 'vite';
    import { createVuePlugin } from 'vite-plugin-vue2';
    
    export default defineConfig(() => {
      return {
        plugins: [createVuePlugin()],
      };
    });
    

设置 root 选项(不推荐)

vue2 项目中 webpack 的模板文件默认是 public\index.html,而 vite 默认配置文件是项目根目录下 index.html,因此,需要通过 root 属性重新指定 vite 的模板文件路径,如:

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { resolve } from 'path';

export default defineConfig(() => {
  return {
    root: resolve(__dirname, './public'),
    plugins: [createVuePlugin()],
  };
});

个人不推荐这种方式,建议还是将 index.html 复制到根目录下让 vite 使用这个外部的模板文件,否则页面在加载 main.ts 时会出现 404 的情况.

配置 vite 命令

这个非常简单,直接在 package.json 配置对应的 vite 命令即可,如下:

  "scripts": {
    "vite": "vite",
    "dev": "cross-env API_ENV=dev vue-cli-service serve --mode dev",
    "build:test": "cross-env API_ENV=test vue-cli-service build",
    "build:prod": "cross-env API_ENV=prod vue-cli-service build"
  },

基于 ESMoudle 设置 index.html 模板的入口文件

通过 npm run dev 启动项目,页面正常访问,如下

基于 webpack 项目接入 vite 你可能需要注意的点

此时,通过调试器查看网络请求会发现其实只请求了如下的资源,而关键的 cssjs 资源并没有被加载:

基于 webpack 项目接入 vite 你可能需要注意的点

这是因为原本项目中的 index.html 模板中是通过 webpack 基于入口文件进行打包构建后自动注入 cssjs 等关键资源,而在 vite 中模板 index.html 就是入口资源,意味着如果我们需要加载对应的资源,得手动在 index.html 这个模板资源中基于 ES Module 指定入口资源,如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="icon" href="./favicon.ico" />
    <title>PC</title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but esm-pc-fe doesn't work properly without JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>

    <div id="app"></div>

    <script src="../src/main.ts" type="module"></script>
  </body>
</html>

兼容 webpack 和 vite 配置

vite 设置别名

基于以上修改之后,在重新启动,实际上会出现如下错误:

基于 webpack 项目接入 vite 你可能需要注意的点

本质原因就是原本我们在 webpack 中设置的 别名 不能被 vite 识别,因此我们需要在 vite 中重新设置一下这些别名:

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { resolve } from 'path';

const pathResolve = (pathUrl) => resolve(__dirname, pathUrl);

export default defineConfig(() => {
  return {
    resolve: {
      alias: {
        '@': pathResolve('./src'),
        '@build': pathResolve('./build'),
        '@api': pathResolve('./src/api'),
        '@utils': pathResolve('./src/utils'),
        '@views': pathResolve('./src/views'),
      },
    },
    plugins: [createVuePlugin()],
  };
});

vite 处理 css 预处理器

基于以上修改后,重新启动此时可能会报如下错误(正常情况下是不会的):

基于 webpack 项目接入 vite 你可能需要注意的点

意思很明确,其实就是没有不能直接处理 .less 文件,不过在 vite 中只需要安装对应的 css 预处理器就可以了,如此时直接 npm install less -D 即可,不需要再额外配置类似 webpack 中的 loader,其实这个错误很少会出现,因为无论你的项目使用什么 css 预处理器,都必须要得先进行安装,意味着在 vite 中可以直接使用.

使用 import 代替 require

vite 中没有 require 而在 webpack 中是可以使用的,这就意味着原本项目中使用的 require 的形式会在 vite 中抛出错误:

基于 webpack 项目接入 vite 你可能需要注意的点

在组件中加载图片

const bgImg = require('@/assets/images/logo/bg.jpeg');
const avatarImg = require('@/assets/images/avatar.png');
             【转换为如下形式】
import bgImg from '@/assets/images/logo/bg.jpeg';
import avatarImg from '@/assets/images/avatar.png';

加载 js 配置文件

const EnvBaseConf = require('@build/webpack.base.conf.js');
            【转换为如下形式】
import EnvBaseConf from '@build/webpack.base.conf.js';

使用 import.meta.env 代替 process.env

import.meta 是一个在 ES 模块内部可用的对象,它包含关于模块运行环境的有用信息,可以在这个对象的 env 属性上获取当前的环境信息,因为在 vite 中不在将对应的环境信息挂载到 process.env 上,这就会导致最终取值结果为 undefined.

vite 处理 svg

通常在 webpack 中处理 svg 有三步:

  • 自动加载对应的 svg 文件
    // svg.js
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'
    
    Vue.component('svg-icon', SvgIcon)
    
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    
  • 在入口文件 main.ts 中引入 svg.js
  • vue.config.js 中为 *.svg 文件配置对应的 loader
    const svgRule = config.module.rule('svg');
    // 清除已有的所有 loader
    // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后
    svgRule.uses.clear();
    // 添加要替换的 loader
    svgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({
      symbolId: 'icon-[name]',
    });
    

vite 中只需要配置 vite-plugin-svg-icons

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import viteSvgIcons from 'vite-plugin-svg-icons';
import { resolve } from 'path';

const pathResolve = (pathUrl) => resolve(process.cwd(), pathUrl);

export default defineConfig(() => {
 return {
   resolve: {
     alias: {
       '@': pathResolve('./src'),
       '@build': pathResolve('./build'),
       '@api': pathResolve('./src/api'),
       '@utils': pathResolve('./src/utils'),
       '@views': pathResolve('./src/views'),
     },
   },
   plugins: [
     createVuePlugin(),
     viteSvgIcons({
       iconDirs: [pathResolve('/src/assets/icons/svg')], // 指定要缓存的图标文件夹
       symbolId: 'icon-[name]', // 执行 icon-name 的格式
     }),
   ],
 };
});

区分 webpack 和 vite 环境

有些配置相关的内容还是没有办法很好的复用,此时可以通过访问 import.meta.env 值的方式,判断当前环境是否属于 vite 环境,以便于处理一些 webpackvite 本身不兼容的地方,比如在加载文件资源时 webpack 中需要使用 require 加载,vite 中需要通过 import 加载等,当然这个可以通过 import(xxx) 的方式来加载是可以兼容两者的,这里只是提出个引子.

最后

以上就是大概需要注意的一些内容,相信有了上述的处理经验,即使你遇到其他问题也可以很快的解决,实际上内容不算多、也不算难,其实只要一步步根据出现的问题逐个解决即可.

简单看一下接入 vite 前后的整体编译速度:

基于 webpack 项目接入 vite 你可能需要注意的点 基于 webpack 项目接入 vite 你可能需要注意的点

注意:本地服务启动方面 vite 相比于 webpack 来说速度很快,其实它的快其实是基于 esbuild 实现的 预构建,还不算是真正做编译,只有页面真正初始化加载时,才会对当前页面需要访问的文件资源进行 按需编译,所以如果要真正比对其实还得考虑它们 首屏加载的速度,不过 vite 的按需编译也会使得它整体速度会更快一些.