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

highlight: a11y-dark 前言 都已经 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文件

还有一个就是 vite 默认不支持 ejs 的语法(ps:其实有尝试用过vite-plugin-html插件,但是会启动报错 ),在当前项目中也没有实际性的意义,就不折腾啦,所以改为了原生写法
- - - 锐客网 # 改为了下面这样 + + 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替换webpack的】原因的话是因为vite不支持对.vue后缀的识别,在引入组件的文件路径上补充.vue后缀就好啦

    推荐阅读