vue3脚手架Vite

Vite

简介

下一代的前端工具链，为开发提供极速响应。

官网：https://cn.vitejs.dev/

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

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

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

vite特点：

• 极速的服务启动：使用原生 ESM 文件，无需打包!

• 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热替换（HMR）

• 丰富的功能：对 TypeScript、JSX、CSS 等支持开箱即用。

• 优化的构建：可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

• 通用的插件：在开发和构建之间共享 Rollup-superset 插件接口。

• 完全类型化的API：灵活的 API 和完整的 TypeScript 类型。

创建项目

npm create vite@latest

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

启动项目

把项目运行到开发环境，在开发项目的过程中使用：

cd  项目目录 #进入项目目录

npm i 		  #安装模块包

npm run dev #启动项目      

在浏览器的地址栏访问：http://127.0.0.1:5173打开项目。

打包项目

打包的文件会输出到dist文件中，一般是项目开发完毕 或者 阶段性功能完毕打包输出文件，发布上线：

npm run build 				

运行dist 文件夹中的index.html，不能直接双击打开index.html，需要把dist文件夹中所有的文件放到服务器静态目录下，可以使用live server插件、anywhere、nodejs 的public目录。

• 开发过程中使用 npm run serve，开发调试比较方便
• 开发完毕项目打包上线，使用 npm run build ，最终是把dist文件中的内容放到服务器的静态目录

项目结构

├── node_modules 
├── public
│   └── vite.scg: 页签图标
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── components: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── index.html: 主页面
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
├── vite.config.js：项目配置文件

index.html 与项目根目录

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析

这个语法同样也适用于

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

静态资源处理

将资源引入为 URL

服务时引入一个静态资源会返回解析后的公共路径：

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

例如，imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png。

行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

• url() 在 CSS 中的引用也以同样的方式处理。
• 如果 Vite 使用了 Vue 插件，Vue SFC 模板中的资源引用都将自动转换为导入。
• 常见的图像、媒体和字体文件类型被自动检测为资源。
• 引用的资源作为构建资源图的一部分包括在内，将生成散列文件名，并可以由插件进行处理以进行优化。
• 较小的资源体积小于 assetsInlineLimit 选项值 则会被内联为 base64 data URL。

public 目录

如果你有下列这些资源：

• 不会被源码引用（例如 robots.txt）
• 必须保持原有文件名（没有经过 hash）
• …或者你压根不想引入该资源，只是想得到其 URL。

那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

目录默认是 /public，但可以通过 publicDir 选项 来配置。

请注意：

• 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
• public 中的资源不应该被 JavaScript 文件引用。

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

这在现代浏览器中能够原生使用 - 实际上，Vite 并不需要在开发阶段处理这些代码！

这个模式同样还可以通过字符串模板支持动态 URL：

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href

使用图片资源

放在public中

放在pubilc中，打包的时候会直接复制pubilc中的图片，放在pubilc中的图片相当于放在服务器根目录的资源

• 在组件中使用：