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 i
npm run serve

Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。

1.修改代理地址不用重启

hmr就完事了

2.图片地址使用别名报404

require(@/assets/img) 替换成/src/assets/

实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。

function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;}

引入图片不支持require

3.启动项目不支持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/378228376

import { 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.less

npm i less -D

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