迁移vite步骤及采坑记录

青梅煮酒论英雄

已于 2022-02-28 15:17:45 修改

阅读量1.9k

点赞数

分类专栏： vite 文章标签： vue.js

于 2022-02-28 10:44:30 首次发布

本文链接：https://blog.csdn.net/this_tall_people/article/details/123176821

版权

本文详细记录了将项目从Vue CLI迁移到Vite的步骤，包括安装依赖、配置vite.config.js、处理多入口、解决alias问题、import报错、样式处理等。在迁移过程中遇到的诸如Failed to resolve import、require改import、CommonJS模块转换等问题，作者给出了具体的解决办法，并介绍了Vite的工作原理和热更新机制。

摘要由CSDN通过智能技术生成

背景分析

本次的目的不是直接用 vite 替换 vue-cli ，而是想同时保留 vite 和 vue-cli 。除去影响开发体验
webpack 和 vite 本质上都是入口文件 + 依赖分析 + 模块转换。vite 是使用的时候进行处理（vite针
对第三方库有同样会进行预处理）， webpack 则是先全部处理完毕。当浏览器天然支持 ES module 之
后，实时处理变得可能。这也是 vite 启动速度快的原因。

步骤

1. 分析vue.config.js，安装相关依赖

yarn add vite vite-plugin-vue2 -D # 这里只安装了必要的vite 与 vite vue2插件

package.json 中添加scripts 命令

"scirpts": {
    ..., "dev": "vite" }

2.编写vite.config.js


const {
    createVuePlugin } = require('vite-plugin-vue2');
const {
    resolve } = require('path');
const {
    viteCommonJS } = require('@originjs/vite-plugin-CommonJS');
import {
    cjs2esmVitePlugin } from 'cjs2esmodule'
module.exports = {