官方文档：

开始 | Vite 官方中文文档 (opens new window)

vite是新一代的前端构建工具，能够显著提升前端开发体验

它主要由两部分组成：

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

很简单的特性

• 服务器启动时间极快：在开发模式下不需要打包整个应用，而是直接在浏览器中加载模块。这大大缩短了开发服务器的启动时间
• 即时热模块替换（HMR）：Vite 提供了几乎即时的热模块替换功能，当你修改代码时，仅更新发生变化的模块，而不是整个页面刷新，从而显著提高开发效率。
• 原生 ES 模块支持
• Vite 支持丰富的插件生态系统
• 多种框架支持：除了 Vue.js，Vite 还支持 React、Svelte 等多种前端框架

平时运行启动普通的vue项目时候老是等半天是吧

Vite 与 Vue CLI 的提升和区别

Vue CLI 是 Vue.js 的一个官方脚手架工具，提供了项目初始化、开发服务器启动、构建等功能。但随着项目规模的增大，Vue CLI 在开发服务器启动和热更新方面逐渐显现出性能瓶颈。Vite 的出现正是为了解决这些问题。

相较之下，vite显著的提升主要在

1. 开发服务器启动时间

2. 热更新速度

开始创建项目

先有node16+先

使用 Vite 创建一个 Vue 3 项目，只需简单的几步：

1. 安装 Vite：首先，你需要全局安装 Vite。

   npm install -g create-vite
   

2. 创建项目：使用 Vite 创建一个 Vue 3 项目。

   npm init 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
   

3. 安装依赖：进入项目目录并安装依赖。

   cd my-vue-app
   npm install
   

4. 启动开发服务器：启动 Vite 开发服务器。

   npm run dev
   

对比一下Vue CLI 和 Vite

Vite的项目结构

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js
└── yarn.lock or package-lock.json

node_modules/	存放项目的所有依赖包，由 npm 或 yarn 自动生成和管理。
public/	静态文件目录，里面的文件不会被 Webpack 处理，最终会原样复制到打包目录下。
public/favicon.ico	网站的图标。
public/index.html	应用的主 HTML 文件，Vue CLI 会在构建时自动注入生成的静态资源链接。
src/	源代码目录，存放应用的主要代码。
src/assets/	存放静态资源，如图像、字体等。这些文件会由 Webpack 处理，可以通过相对路径引用。
src/assets/logo.png	示例图像文件。
src/components/	存放 Vue 组件，每个组件都是一个独立的 .vue 文件。
src/components/HelloWorld.vue	默认生成的示例组件。
src/views/	存放视图组件，通常对应路由，每个视图都是一个独立的 .vue 文件。
src/views/Home.vue	默认生成的主页组件。
src/router/	存放路由配置文件。
src/router/index.js	路由的配置文件，定义了应用的路由规则。
src/App.vue	根组件，整个应用的入口组件。
src/main.js	应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。

Vite 配置

Vite 的配置文件 vite.config.js 允许你进行各种自定义配置。以下是一个简单的配置示例

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
});

在这个配置中，我们使用了 @vitejs/plugin-vue 插件来支持 Vue 3，并设置了路径别名 @ 指向 /src 目录，以及将开发服务器端口设置为 3000。

Vue CLI 项目结构

my-vue-cli-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── index.html
├── package.json
├── vue.config.js
└── README.md

Vue CLI 配置

Vue CLI 的配置文件 vue.config.js 允许你进行各种自定义配置。以下是一个简单的配置示例：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  devServer: {
    port: 8080,
  },
};

在这个配置中，我们设置了应用的公共路径、输出目录、静态资源目录，以及开发服务器端口。

vite提供预构建，可以提高页面加载速度

Vite 天然支持引入 .ts 文件， 不过vite仅执行 .ts 文件的转译工作，并 不 执行任何类型检查

客户端类型

Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：

/// <reference types="vite/client" />

同时，你也可以将 vite/client 添加到 tsconfig 中的 compilerOptions.types 下：

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

这将会提供以下类型定义补充：

• 资源导入 (例如：导入一个 .svg 文件)
• import.meta.env 上 Vite 注入的环境变量的类型定义
• import.meta.hot 上的 HMR API (opens new window) 类型定义

vite部署静态站点应用

• 使用的是默认的构建输出路径（dist）

• 使用 NPM 和 Yarn

• Vite 已作为一个本地开发依赖（dev dependency）安装在你的项目中，并且你已经配置好了如下的 npm scripts：

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

vite preview 用作预览本地构建，而不应直接作为生产服务器。

构建应用

运行 npm run build 命令来执行应用的构建。

$ npm run build

默认情况下，构建会输出到 dist 文件夹中。你可以部署这个 dist 文件夹到任何你喜欢的平台。

本地测试应用

当你构建完成应用后，你可以通过运行 npm run preview 命令，在本地测试该应用。

$ npm run build
$ npm run preview

vite preview 命令会在本地启动一个静态 Web 服务器，将 dist 文件夹运行在 http://localhost:4173。这样在本地环境下查看该构建产物是否正常可用就方便多了。

你可以通过 --port 参数来配置服务的运行端口。

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

现在 preview 命令会将服务器运行在 http://localhost:8080。

GitHub Pages

1. 在 vite.config.js 中设置正确的 base。

   如果你要部署在 https://<USERNAME>.github.io/ 上，你可以省略 base 使其默认为 '/'。

   如果你要部署在 https://<USERNAME>.github.io/<REPO>/ 上，例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>，那么请设置 base 为 '/<REPO>/'。

2. 在你的项目中，创建一个 deploy.sh 脚本，包含以下内容（注意高亮的行，按需使用），运行脚本来部署站点：

   #!/usr/bin/env sh
   
   # 发生错误时终止
   set -e
   
   # 构建
   npm run build
   
   # 进入构建文件夹
   cd dist
   
   # 如果你要部署到自定义域名
   # echo 'www.example.com' > CNAME
   
   git init
   git checkout -b main
   git add -A
   git commit -m 'deploy'
   
   # 如果你要部署在 https://<USERNAME>.github.io
   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
   
   # 如果你要部署在 https://<USERNAME>.github.io/<REPO>
   # git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
   
   cd -
   

TIP

你也可以在你的 CI 中配置该脚本，使得在每次推送代码时自动部署。

GitLab Pages 配合 GitLab CI

1. 在 vite.config.js 中设置正确的 base。

   如果你要部署在 https://<USERNAME or GROUP>.gitlab.io/ 上，你可以省略 base 使其默认为 '/'。

   如果你要部署在 https://<USERNAME or GROUP>.gitlab.io/<REPO>/ 上，例如你的仓库地址为 https://gitlab.com/<USERNAME>/<REPO>，那么请设置 base 为 '/<REPO>/'。

2. 在项目根目录创建一个 .gitlab-ci.yml 文件，并包含以下内容。它将使得每次你更改内容时都重新构建与部署站点：

   image: node:16.5.0
   pages:
     stage: deploy
     cache:
       key:
         files:
           - package-lock.json
         prefix: npm
       paths:
         - node_modules/
     script:
       - npm install
       - npm run build
       - cp -a dist/. public/
     artifacts:
       paths:
         - public
     rules:
       - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
   

还有很多那种就是托管站点平台的应用啥的，可以看官方教程或者其他的博客知识

环境变量和模式

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

• import.meta.env.MODE: {string} 应用运行的模式 (opens new window)。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项 (opens new window)决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 应用是否运行在 server (opens new window) 上

.env 文件

在vite项目的根目录下创建一.env文件可以创建加载额外的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

并且为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码，例如下面

VITE_SOME_KEY = 123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

如果你想自定义 env 变量的前缀，请参阅 envPrefix (opens new window)。

服务端渲染

SSR 特别指支持在 Node.js 中运行相同应用程序的前端框架（例如 React、Preact、Vue 和 Svelte）），将其预渲染成 HTML，最后在客户端进行水合处理

vite打包

为什么选vite?

webpack对比