新建vite项目

目前vite项目可以通过2个方法创建：

vite官方

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

create-vue(推荐)

npm init vue@3

拷贝文件

将webpack项目里的src、public等文件夹直接复制到vite项目中

修改index.html

在webpack中，我们的index.html常常用各种webpack变量，这里都要去掉

引入main.js

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

修改环境变量

在webpack中，我们常用process.env.NODE_ENV,在vite中需要全部替换为import.meta，我这边建议你在webpack中使用DefinePlugin

webpack配置

new webpack.DefinePlugin({
    _env: JSON.stringify({
        command: process.env.NODE_ENV
    })
}),

vite配置 vite自带define配置项

define:{
  _env:JSON.stringify({
    command:command === 'build' ? 'production' : 'development'
  })
},

之后在main.js中加入,以便在代码中全局调用

window._env = _env

替换插件

vite中已经有了一部分webpack的插件,例如compression-webpack-plugin变成vite-plugin-compression等等，具体你可以在这里找找github.com/vitejs/awes…

vite好用的插件

vite里有一些特别好用的插件，可以极大的提升开发体验

unplugin-vue-define-options 可以在script setup 中定义一些组件的选项，例如name

defineOptions({name:'App'})

unplugin-auto-import 自带引入一些vue常用的函数，例如ref、unref。

将require替换为import

vue项目里常常会用require引入一些资源，你需要改为import,vite会自动处理把图片转为base64还是url 例如

// webpack
const img = require('./a.png')
//vite
import img from './a.png'

umd包

vite对于umd包的支持一直不好，我只能建议，要么找类似包，找ESM版本的，或者通过optimizeDeps里强制转换或者不转换，也可以把umd放到index.html中加载，使用全部变量调用

optimizeDeps:{
  include:['fastclick'],
  exclude:['tiny-swiper']
}

vue cli如何快速转换至vite项目