Vite基本概述 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第14天

Vite是啥玩意

是一种前端构建工具 开箱即用
由Server和指令组成
()一堆API真好玩

Vite项目构建

我们用yarn罢

yarn create vite

(添加参数以自定义其他内容)

yarn create vite 114514-homo-app --template vue

//又用上npm力()-社区模板
npx degit user/project my-project
cd my-project

npm install
npm run dev

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件
npm scripts：

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

项目到这里基本就构建完成
我们来看看插件方面

插件

vite-plugin-eslint(eslint支持

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [eslintPlugin()],
});

vite-plugin-components(用来减少import(bushi (直接按需引入

import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    Vue(),
    ViteComponents()
  ],
};

插件排序

Rollup 插件兼容上 我们需要所谓的插件排序

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre'
    }
  ]
})

(另附 优先级

• pre：在核心插件之前调用该插件
• 默认：在核心插件之后调用该插件
• post：在构建插件之后调用该插件
  好耶！基本的部分学完了 让我们来构建生产项目罢-执行 vite build 兼容性:Chrome >=61 Firefox >=60 Safari >=11 Edge >=16
  (自定义目标最低最低的目标是es2015
  (plugin-legacy这插件可以来支持旧版浏览器

多页构建

简单来说 就是多层次 我们可以为每个我们想加的制定html作为入口

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
}

(在config中)

包分离

dist中css和js这种 我们假如要分离到不同文件夹 怎样做呢

defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: '[name]-[hash].[ext]',
        chunkFileNames: '[name]-[hash].[ext]',
        assetFileNames: '[ext]/[name]-[hash][ext]'
      }
    }
  }
});

按照name hash ext变量填入即可 Bye~