【Vite】快速入门及其配置

小秀_heo

已于 2024-07-20 16:03:59 修改

阅读量75

点赞数 2

分类专栏：前端构建工具文章标签：前端 javascript vue.js

于 2024-07-20 13:47:44 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/140567942

版权

前端构建工具专栏收录该内容

21 篇文章 0 订阅

订阅专栏

概述

Vite是前端构建工具。vite

相较于webpack,vite采用了不同的运行方式：

开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
在项目打包部署时，使用 rollup 对项目进行打包
除了速度外，vite使用起来也更加方便

默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。

我们可以初始化一个工程：

npm init 
npm i vite -D

在这里插入图片描述

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
  <script
    type="module"
    src=./index.js
  ></script>
</head>

<body>
  <h1>Vite demo</h1>
</body>

</html>

document.body.insertAdjacentHTML('beforeend', '<h1>Hello Vite!</h1>')

然后执行：

npx vite

启动项目，并且自动支持热更新和启动服务器。

在这里插入图片描述

npx vite build进行项目打包，且使用的是 ESM。但是 ESM 必须通过 url的方式进行加载，也就是说，使用打包后的 html 不能运行项目，必须使用 http / https 才可以，所以需要通过服务器打开项目。

但是 live server 也不可以，live server 的根目录配置有问题，默认配置的根目录是项目目录，我们还需要改为 dist 目录。

所以要么通过将 dist 放在服务器运行，要么执行 npx vite preview 运行。

vite是开发服务器，并不对项目进行打包；而vite preview是打包后的预览服务器。

在这里插入图片描述

配置

一般的 style，css(sass, less 等)，图片处理等一系列常用配置 vite 已经内置了，无需我们手动配置。

要想为传统浏览器提供支持（es6 -> es5），可以按下面这样使用官方插件 @vitejs/plugin-legacy：

$ npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

legacy 在打包时需要插件 terser（用于压缩代码），所以还需要装：

npm i terser -D

小秀_heo

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vite】快速入门及其配置

Vite也是前端的构建工具。vite开发时，并不对代码打包，而是直接采用ESM的方式来运行项目在项目部署时，在对项目进行打包除了速度外，vite使用起来也更加方便默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。
复制链接

扫一扫