总览

Vite（法语意为 “快速的”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

前言: 公司的老项目一直使用的是webpack，而面对复杂的构建和待机般构建速度，属实是有些苦不堪言，所以！我！秉承着光荣而艰巨的任务-webpack迁移vite

需要用到的依赖：

 "vite-plugin-vue2": "^1.9.3",
 "vite": "^2.8.1",
 "vue-template-compiler": "^2.6.12"
复制代码

迁移

1. 需要将index.html放到根目录下 并且把%PUBLIC_URL%和一些webpack配置去掉

2. 修改vue.config.js改为vite.config.js 引入依赖

import path from 'path'
import { createVuePlugin } from 'vite-plugin-vue2'
import { defineConfig } from 'vite'
复制代码

3. 配置vite.config.js

export default defineConfig({
  optimizeDeps: {},
  publicDir: 'public', //public路径
  base: './', //打包之后的路径
  build: {`// 打包配置`
    target: 'modules', // 浏览器兼容性 "esnext"|"modules"
    outDir: 'dist', //指定输出路径
    assetsDir: 'assets', // 生成静态资源存放路径
    assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    cssCodeSplit: true, //是否开启css拆分
    sourcemap: false, //构建source map文件
    rollupOptions: {} // rollup打包配置
  },
  server: {
    port: 4000,
    strictPort: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://xxxxxx', // 本机ip 或 域名下的/api
        changeOrigin: true,
        secure: true,
        agent: true,
        logLevel: 'debug',
        ws: false,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
    hmr: {
      overlay: false
    }
  },

  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/style/xxx.less')}";`
        }, //配置全局less文件
        javascriptEnabled: true
      }
    }
  },

  plugins: [createVuePlugin({ jsx: true })], //createVuePlugin
  resolve: {
    alias: {  // 配置别名
      '@': resolve('src'),
      components: resolve('src/components'),
      plugins: resolve('src/plugins'),
      utils: resolve('src/utils'),
      assets: resolve('src/assets'),
      constant: resolve('src/components/bi/constant')
    }
  }
})

复制代码

踩坑记录：

新建的vite项目会有@vitejs/plugin-vue的plugin引入 但是vite2 webpack 迁移vite并不需要 如果使用了会报错&lt console <需要注意

4. vite 并不支持 require 和 require.context 所以进行更改

 // require('../../../assets/img/xxxx-xxx.png') 改为
    new URL('../../../assets/img/xxx-xxx.png', import.meta.url)
复制代码

// const context = require.context('./', false,   /\.vue$/) 改为
   const context = import.meta.globEager("./**/*.vue")
复制代码

5. 如果之前使用的是history路由，并且在vue.config.js里添加了publicPath，就要在router.js添加base，否则打包之后会展示白屏

const router = new VueRouter({
  mode: 'history',
  base: '/你的publicPath',
  routes
})
复制代码

6. less和sass和的公共变量文件要再vite.config.js里引入，否则会报undefined

css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/style/xxx.less')}";`
        },//多个文件可以进行分号分割
        javascriptEnabled: true
      }
    }
  },

复制代码

6. import url(‘xxx’) 要改为 import ”

 // import url('../assets/xx/xxx') 改为
    import '../assets/xx/xxx'
复制代码

7. eslint和ts不能读取vite中的别名配置

  "eslint-import-resolver-alias": "^1.1.2", //添加依赖
复制代码

在.eslintrc中添加配置

module.exports = {
   ...
  settings: {
    'import/resolver': {
      alias: [['@', './src']]
    }
  },
  ....
 }
复制代码

在tsconfig.json中添加配置

{
...
 "paths": {
      "@/*": [
        "src/*"
      ]
    },
   ...
}
复制代码

ok~完美解决

8. 还有一个问题要注意，如果需要升级vue3的同学，vue3不可以使用vue-template-compiler了，用的是另外的依赖@vue/compiler-sfc，注意目前安装vue-loader要指定16以上的版本，默认安装的最新版本不行的

大功告成～