在 Vue2.x 项目中使用 Vite

November 05,2021
0
Vue、Vite

Vite 是个啥

如 Vite 官网所介绍,Vite 是一个新型前端构建工具,能够显著提高前端开发体验,主要体现在:

  • 极速的服务启动
  • 轻量快速的热重载
  • 丰富的功能 Vue/React/TypeScript/JSX 等开箱即用

搭建一个 Vite 项目

npm init vite@latest

这行代码会创建一个最简单的 Vite 项目,其中 Vue 为 3.x 版本。然后启动项目,能看到如下的输出,只用了 500ms 左右就能启动开发环境:

vite dev time spent

而 Vue CLI 生成 Webpack 项目的运行时间如下,大概在 3s 左右:

vue serve time spent

显而易见的效率提升,对于大项目来说真的是很香了,不用坐等,直接启动就能看到项目的效果

一点小说明

以上是对 Vite 的简单介绍,由于 Vite 天然支持 Vue3.x 版本,不需要过多的配置就可以使用。但是对于 Vue2.x 版本来说,Vite 缺乏相应的支持。那么如何开启 Vite 对 Vue 的支持呢,后面剩余的篇幅就专门来介绍

Vite 和 Vue2.x

配置文件

Vite 会生成一个 vite.config.js 的配置文件,类似之前的 vue.config.js,可以直接使用 ES6 的语法:

import { defineConfig } from 'vite';

export default () =>
  defineConfig({
    server: {
      /**/
    },
    plugins: [
      /**/
    ],
  });

根目录

Vite 生成的项目,index.html 在项目最外层即项目根目录下,而不是在 public 文件夹内,这点需要注意。但是 Vite 也可以指定目录作为根目录 vite serve some/sub/dir

JSX

想让 Vite 支持 Vue2.x 的 JSX 语法,需要安装插件 vite-plugin-vue2:

npm i -D vite-plugin-vue2

修改一下配置文件:

import { createVuePlugin } from 'vite-plugin-vue2';

export default () =>
  defineConfig({
    plugins: [createVuePlugin({ jsx: true })],
  });

CSS 预处理器

Vite 提供了 sass/scss/less/stylus 的内置支持,不需要安装特定的插件,只要安装对应的预处理器依赖:

npm i -D sass less stylus

需要注意由于 sass 默认使用 dart-sass,/deep/ 语法无法被正确处理,语法应该修改为 ::v-deep

环境变量

Vue CLI 生成的项目中可以通过 VUE_APP_ 这种方式来访问环境变量。Vite 修改了环境变量的使用方式,Vite 在一个特殊的 import.meta.env 上暴露了环境变量

内建变量:

  • import.meta.env.MODE {string} 应用运行模式
  • import.meta.env.BASE_URL {string} 应用基本 URL,可配置项
  • import.meta.env.PROD {boolean} 是否在生产环境
  • import.meta.env.DEV {boolean} 是否在开发环境

自定义变量:在 env 环境变量文件中定义的以 VITE_ 为前缀的变量才会暴露给 Vite 处理

#只有 VITE_SOME_KEY 会暴露出去
VITE_SOME_KEY=123
SOME_KEY=321

在 vue/js 文件中使用:import.env.VITE_SOME_KEY

在 html 中使用需要先安装插件 vite-plugin-html,例如需要用到应用的运行模式 mode 变量,可以如下修改配置文件:

import { createVuePlugin } from 'vite-plugin-vue2';
import { injectHtml } from 'vite-plugin-html';

export default ({ mode }) =>
  defineConfig({
    plugins: [
      createVuePlugin({ jsx: true }),
      injectHtml({
        data: {
          env: mode,
        },
      }),
    ],
  });

在 html 中使用 EJS 的方式插入对应的变量名称,编译之后就能直接得到变量的值:

<p><%- env %></p>

CommonJS 之 require

由于 Vite 是基于原生 ES 模块开发的,所以不支持 require 方法,如果项目中用到 require('../../assets/img.png') 这种方式就会报错,这种情况就需要开发者手动将 require 修改为 import,如果是静态资源可以统一放到 public 文件夹之后再引用,参考:静态资源处理

处理 alias @

在项目中我们通常会像下面这样引用组件:

import Card from '@/compoennts/Card.vue';

Vue CLI 生成的项目 @ 是通过 Webpack 来配置的,只是 Vue CLI 帮我们做了这个配置。而 Vite 需要手动配置一下:

import path from 'path';

export default () =>
  defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  });

代理

参考:开发服务器选项

兼容性

Vite 默认的打包方式放弃了对传统浏览器的支持,如果你的项目需要支持传统浏览器,参考:@vitejs/plugin-legacy

启动

先看使用 Vite 之前,总共耗时 21s 左右:

vue cli project

使用 Vite 之后启动只需要 1-2s 左右:

vite project

最后

JS 模块的发展经历的几个阶段,到现在浏览器也开始实现 ES 原生模块,极大的提高了用户体验和开发体验。从 21s 到 2s 的启动时间,我想不仅仅是速度的提升,我们更应该关注背后的思想,以及 Vite 所做的取舍。把这些思想结合到项目中,我们也要去思考如何取舍,让新技术不止于理论


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。