vite 入门及基础配置

小驴子
812 阅读7分钟

官网地址：cn.vitejs.dev/guide/

vite的介绍

vite在法语意为“快速”的意思；是一种新型前端构建工具，能够显著提升前端开发体验。

vite由两部分组成：

Vite最大的特点就是：快；

webpack:github.com/webpack/web…

vite:github.com/vitejs/vite

Vite3.0 版本发布， 优化了很多功能，具体链接我们可以参考如下：Vite 3.0 发布: 核心更新盘点与分析-51CTO.COM

兼容性

默认情况下，Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。作为参考，Vite 使用这个 browserslist 作为查询标准：

  • Chrome >=87
  • Firefox >=78
  • Safari >=13
  • Edge >=88

如果想兼容低版本浏览器；我们可以采取以下方案：

1、vite.config.js里 build.target配置；

 build: {
    target: 'es2015'
  }

2、使用插件@vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy -D

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

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

node版本

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

vite 与 webpack 对比

底层实现方式来说

Vite 应用中的模块区分为 依赖 和 源码 两类

  • 依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。

    Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍，js 的一般操作都是毫秒配置的计，go 则是纳秒。而且项目中依赖会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

  • 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑，Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。并且会根据 304 Not Modified 进行协商缓存；

启动方式

vite.png

vite是直接启动开发服务器，请求那个模块再对那个模块进行实时编译，由于现在浏览器本身就支持es Module,会自动向依赖的Module发出请求，vite充分利用这一点，将开发环境下的模块文件，作为浏览器要执行的文件。

由于vite在启动上不需要打包，也就以为着不需要分析模块的一览，不需要编译，因此启动速度非常快，当浏览器请求某个模块时，再根据需要对模块内容进行编译。

webpack

webpack.png webpack启动开发服务器，必须抓取并构建整个应用，才能提供服务，

热更新对比

使用webpack中，如果一行代码进行了修改，webpack需要重新进行打包，随着项目的增大热更新需要的时间也就越长

vite利用esbuild进行构建的，只需重新处理有修改的模块，在小型项目中，相差不大，但是在大型项目中，热更新速度可以达到webpack的10倍，甚至更多。

总的来说，webpack，虽然在较大项目启动时，较缓慢，但功能还是非常强大，非常全面的，而vite是为项目而生的，在配置方面也比较简化，很多配置已经内置化，是更加集成化的前端工具，但vite的相关生态还不够，想要完全替代webpack，相关工具还要再完善。

接下来，开始体验吧。。。

搭建第一个 Vite 项目

使用npm

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

启动服务.png vanilla:原生js vue：指vue3

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

命令行界面

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

项目配置

1.入口文件

index.html为项目入口文件，如果入口文件里有变量，我们可以如下配置：

npm i vite-plugin-html -D

//index.html
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%- title %></title>
  <%- injectScript %>
</head>

在vite.config.js中定义：

import {  createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          title: 'develop'
        }
      }
    })
   ]
})

2.环境变量

主要是通过 import.meta.env 获取

console.log(import.meta.env)
// 打印结果
{
   BASE_URL: "/"
   DEV: true
   MODE: "development"
   PROD: false
   SSR: false
}

配置项目环境变量：

新建 .env.development ,开发环境下：

ENV = 'development'

VITE_BASE_URL = '/api'
VITE_BASE_API='http://localhost/api'

新建.env.production,生产环境下：

ENV = 'production'

VITE_BASE_URL = 'http://xxxxxx/api/'

在package.json 定义：

"scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
  },

注意：自定义的环境变量，要以 VITE_ 开头，配置完环境变量后记得重启。

3.项目为vue2项目，需要在vite.config.js中添加插件

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

4. 项目中包含 jsx 语法

import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
  plugins: [vueJsx()]
})

5.css 模块引入

在 vite 中，支持原生css 及css variable 进行使用，例如在var.css中定义：

:root { --my-color: yellow; }

.app{ color:var(--my-color) } 在hellowWorld.vue中引用

<script>
import '../styles/var.css'
</script>
<template>
  <h1 class="app"> vite jsx</h1>
</template>

6.postcss

并且已经集成了 postcss，会通过 postcss 进行编译，例如： vite 中使用 autoprefixer，在根目录新建postcss.config.js文件

module.exports = {
  plugins: [// 前缀追加
    require('autoprefixer')({
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8',
        '> 1%'
      ],
      grid: true
    })
  ]
}

7.css modules

vite 中，支持 css-modules，以 modules.css 结尾的文件就会被自动识别为 css-modules 文件进行使用，例如：

//在 test.modules.css 文件，
 .cssColor{
    color:green;
 }

在.vue文件使用：

//第一种
import classes from '../styles/test.module.css'
<div :class="classes.cssColor">css Module</div>

// 第二种
import {cssColor} from '../styles/test.module.css'
 <div :class="cssColor">css Module</div>

8. CSS 预处理器

vite天然支持less，sass，stylus预处理器的对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持，只需要下载即可使用；

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

9.typescript

vite只编译不校验ts，所以在打包项目之前应该运行 ，你可以在构建脚本中运行 tsc --noEmit校验.ts文件 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "typecheck": "vue-tsc --noEmit && tsc --noEmit"
  },

一般的tsconfig.json如下配置，特别注意isolatedModules:true, types:["vite/client"]的设置；

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "isolatedModules":true,
    "types":["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}}

10.静态资源引入

静态图片引入

import imgurl from './assets/logo.png'
 // 或者 import imgurl from './assets/logo.png?url'
 <img alt="Vue logo" :src="imgurl" />

动态引入图片 new URL(url, import.​meta.url)

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

引入 .json 的某个文件，取其中的某个对象

// 导入整个对象
import json from './example.json'
// 对一个根字段使用具名导入 —— 有效帮助 treeshaking！
import { field } from './example.json'

11.eslint简单配置

npm i -D eslint

npx eslint --init

接下来就是一步步选择，

注意其中 ； 代码在哪里运行 使用空格键全选 浏览器+node，如下：

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

最终会生成如下文件：.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

在eslint中就会显示语法错误提示啦

12.识别.vue 文件

低版本vue2开始时，可能遇到不识别hou

  resolve: {
      // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }

项目的基本配置这些，接下来，让我们项目实战走起～～

avatar
文章
阅读
粉丝