记录Webpack构建的Vue3的项目改成Vite构建的方式中遇到的坑

站长

2023年05月22日 20:51 · 阅读数 22

Vite随着Vue3的发布，也已经很长时间了，因为公司的项目基本都是Webpack构建的，每次开发运行项目都非常的慢，所以这次狠下心，把webpack构建的项目改成vite构建。改动之前，公司运行一个项目大概需要3分钟左右吧，后面改成vite的方式之后，首次启动项目只需要2s，效果真的是杠杠的。

下面直接说下我是怎么一步步改动和遇到的坑吧

第一步：创建新Vite项目

我是先直接创建了一个Vite+Vue3的项目，具体的创建步骤可以看我之前的这篇文章Vite从入门到精通（二）Vite构建Vue3项目，有了一个新的Vite项目之后，我把原先项目src目录下的所以文件都cv到新的项目里。当然package.json的依赖也要全部搬运过去。然后删除一些不要的依赖。需要删除的一些依赖。我这里总结下，当然每个公司的项目也是不同的，依赖肯定也不是全部一样的。我这里就列一些主要的，需要删除的

1、vue-cli相关：因为我们使用vite构建的，vue-cli脚手架相关的依赖肯定是需要删除的，例如：@vue/cli-service、@vue/cli-plugin-babel等
2、 loader相关的：例如：svg-sprite-loader、sass-loader等，凡是带有loader字样的，大家可以检查下是不是需要删除，因为vite中基本所有的三方组件集成方式都是以插件的方式集成到vite.config.js的plugins数组里的，loader加载器的方式都已经不需要了。

主要需要注意的就是这两个点，其他如果还有补充的，欢迎大家评论区讨论。到这里，src目录下的代码文件和package.json里的依赖都已经移植过去了。但这时候还是运行不起来的，所以我们接下去进行第二步。

第二步：vite.config.js配置文件的改造

这一步我们主要把之前在package.json里的删除的一些loader，需要在vite.config.js的plugins数组里的加进去，但有些loader是不需要加的，例如和css预编译器相关的loader(sass-loader)，因为vite是默认支持sass、less的，# Vite从入门到精通（三）Vite中CSS解决方案。我这里列出了主要的一些配置，svg相关的、alias别名设置相关的、server代理相关的

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// import path from 'path-browserify'
import path from 'path'

// svg-icon插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定要缓存的图标文件夹
            iconDirs: [path.resolve('./src/icons/svg')],
            // 执行icon name的格式
            symbolId: 'icon-[name]',
        })
    ],
    base: "./", //打包路径
    resolve: {
        alias: {
            '@':  path.resolve('./src')
        },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
        host: '0.0.0.0',
        // port: 8081, // 服务端口号
        open: true, // 服务启动时是否自动打开浏览器
        cors: true, // 允许跨域
        proxy: {
            '/api': {
                target: '你们公司的接口请求地址',
                changeOrigin: true,
                rewrite: path => path.replace(/^/api/, ''),
            }
        }


    },


})

第二步骤完成之后，这时候项目已经能运行起来了，但可能会报一些错误，我们放到第三步一起讲