Vue3.0项目从Webpack改造成Vite

vite是什么

Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。

它主要由两部分组成：

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

官网

为什么要选vite

• vite2 极速服务，它直接使用 ESM 文件，每次更新速度贼快，只要你的浏览器支持即可
• webpack 优点在于生态强大，这一点 vite 还需要继续努力
• 除了开发环境的服务启动和更新速度差距大以外，在打生产包上并没有什么差距

实现

1.卸载webpack相关的依赖, 删除vue.config.js配置文件
2.安装依赖

npm i vite --save -dev

npm i vite-plugin-html --save -dev一个用于处理html的vite插件,类似于webpack-html-plugin

npm i vite-plugin -compression用于代码压缩

npm i vite-plugin-imagemin --save -dev用于图片压缩

npm i vue-loader-v16 --save -dev类似于vue-loader

3.修改index.html

这里要注意index.html需要放到根目录下（参见vite官网）

4.修改vite.config.js配置文件

import { defineConfig } from 'vite';const { resolve } = require('path');import vue from '@vitejs/plugin-vue';import webpackConfig from './src/config/package.ts';export default defineConfig({  base: webpackConfig.PUBLIC_PATH,  publicDir: resolve(__dirname, 'public'),  assetsInclude: resolve(__dirname, 'src/assets'),  resolve: {    // 别名    alias: {      '@': resolve(__dirname, 'src'),    },  },  server: {    port: webpackConfig.PORT,    proxy: {      '/api': {        target: webpackConfig.PROXY_URL,        changeOrigin: true, //是否跨域        rewrite: (path) => path.replace(/^\/api/, ''),      },    },  },  build: {    sourcemap: !webpackConfig.IS_PRODUCTION,  },  plugins: [vue()],});

5.修改package.json打包命令

"scripts": {    "serve": "cross-env NODE_ENV=development vite",    "build": "cross-env NODE_ENV=production vite build",    "lint": "vite lint"  },

这样我们就大功告成了

npm inpm run serve

Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。1.修改代理地址不用重启hmr就完事了2.图片地址使用别名报404require(@/assets/img) 替换成/src/assets/实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;}引入图片不支持require3.启动项目不支持ip:port访问修改vite.config.js配置server:{host: '0.0.0.0'}然后修改package.json"dev": "vite --host 0.0.0.0"4.require.context()使用vite提供的import.glob进行替换5.模式与环境变量https://zhuanlan.zhihu.com/p/378228376import { loadEnv } from 'vite'export default ({ mode }) => {return defineConfig({plugins: [vue()],base:loadEnv(mode, process.cwd()).VITE_APP_NAME})}.**env.staging文件声明变量注意****VITE_NODE_ENV = development****VITE_BASE_URL = /api****VITE_PUBLIC_PATH = /****不能有引号 、分号等字符**6.lessnpm i less -D

里面还有写具体的坑 ，大家可以自己踩踩！