聊聊我是怎么样用vite替换webpack的

前言

都已经 2202 年了，vite已经可以算是遍地开花了，这两年的关注度也比较高究其原因，还是因为苦webpack久矣；

随着项目功能越来越多，代码越来越复杂，随之而来的就是项目的各种慢（ps:跑个项目的时间都能去茶水间打杯水回来喝一会儿了 😭😭😭）

至于原因，简短来说，就是webpack需要去索引整个项目的文件，编译成一个或多个单独的 js 文件；而vite则是在浏览器请求对应 URL 的时候，再提供对应的文件，更详细的还是去瞅瞅 vite 的自荐吧

开搞

开始进入正题

1. 修改项目配置

终端输入npm i -D vite安装 vite

修改pageage.json中的相关命令

"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"

2. 在根目录创建vite.config.js文件

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

export default defineConfig({
  base: './',
  plugins: [createVuePlugin()],
  server: {
    open: true // 启动完成之后自动打开浏览器
  },
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      } // 使用这种方式可以引入.vue文件，但是图片会404
      {
        find: '/@',
        replacement: 'src'
      }, // 解决图片使用别名404，@符号前面需要加'/',也没有用绝对路径
    ]
  }
})

3. 修改环境变量

在 vite 中已经不支持原来的process.env来访问环境变量了

需要改为import.meta.env来访问，在.env 文件中的变量也需要把前缀改为VITE_（ps:也可以通过在vite.config中设置envPrefix来自定义前缀）

如以下代码：

VITE_APP_API_URL=/api
VITE_TITLE=title

4. 配置全局的 css 变量

在vue-cli中是借助了style-resources-loader来实现的全局变量，在vite中直接通过  css.preprocessorOptions  就可以进行配置

css: {
  preprocessorOptions: {
    less: {
      additionalData: `@import './src/assets/style/variables.less';`
    }
  }
}

5. 修改 index.html 文件

首先将public文件夹下的index.html移动到根目录

在index.html中引入 src 目录下的main.js文件

<script type="module" src="/src/main.js"></script>

还有一个就是 vite 默认不支持 ejs 的语法（ps:其实有尝试用过vite-plugin-html插件，但是会启动报错 😛😛），在当前项目中也没有实际性的意义，就不折腾啦，所以改为了原生写法

- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title><%= VUE_APP_NAME %></title>
# 改为了下面这样
+ <link rel="icon" href="./favicon.ico">
+ <title>Title</title>

做完上面几步，就可以输入npm run dev来运行项目了

遇到的一些问题

1. 不支持 require

重写require的方法来引入图片

// 因为只有图片引入还在使用require，所以就只用于图片引入了
window.require = url => {
  if (typeof url === 'undefined') return
  return new URL(url, import.meta.url).href
}

部分插件是用 require 来加载的，统一改为 import 来引入

// const CodeMirror = require('codemirror/lib/codemirror')
// require('codemirror/addon/hint/show-hint')
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/addon/hint/show-hint'

2. TypeError: Failed to fetch dynamically imported module

原因的话是因为vite不支持对.vue后缀的识别，在引入组件的文件路径上补充.vue后缀就好啦

来自即将24年的补充

图片不支持require的终极方案

上面其实已经有方案解决，但是在typescript项目中还是会提示require不存在，eslint的检测不通过，如果每个vue文件都做一边引用觉得太麻烦

这里借助unplugin-auto-import插件来完成方法的自动引入，首先在utils中封装一个引用图片的方法

// utils/index.ts
export const importAssetsImg = (path: string | URL) => {
    if (typeof path === 'undefined') return
    return new URL(`../assets/images/${path}`, import.meta.url).href
}

然后在vite.config.ts添加unplugin-auto-import的相关配置

import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
 plugins: [AutoImport({
    imports: [
      {
        '@/utils': [
          'importAssetsImg',
        ],
      }],  // 等同于 import { importAssetsImg } from '@/utils'
    eslintrc: {
      enabled: true,
      filepath: "./.eslintrc-auto-import.json", // 生成eslint配置
      globalsPropValue: true,
    },
    vueTemplate: true,
    dts: "src/types/auto-imports.d.ts", // 配置文件生成位置，生成之后设置为false，避免每次启动服务都生成(false:关闭自动生成)
  }),]
})

最后的使用，直接调用importAssetsImg方法就可以

<img :src="importAssetsImg('empty.png')" />

看了下浏览器读取的编译文件，其实是在编译时为方法添加了import语句