Vite学习

最新推荐文章于 2024-10-05 09:01:50 发布

顺拐小乌龟

最新推荐文章于 2024-10-05 09:01:50 发布

阅读量586

点赞数

分类专栏： vue 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_20101263/article/details/121218259

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vite是一款由Vue作者尤雨溪开发的快速前端构建工具，它利用浏览器对ES模块的原生支持，实现快速启动和打包。Vite旨在解决传统工具如webpack在大型项目中启动慢的问题，提高开发效率。创建Vite项目简单快捷，支持多种模板，例如Vue3+TS+TailwindCSS。配置文件中可以设置开发服务器、代理和构建选项，如代码压缩。

摘要由CSDN通过智能技术生成

Vite 学习

什么是Vite

Vite是一种新型前端构建工具，最大的特点是快！冷启动快，热更新快，打包也快。主要包含两部分功能：

1.开发服务器：基于原生ES模块特性，提供丰富的内建功能；
2.构建指令：使用Rollup打包代码，可输出高度优化后的静态资源。

为什么用Vite

随着项目越来越大，JavaScript代码量指数级增长，此时诸如webpack等工具启动开发服务器需要很长时间，即使热更新HMR也需要几秒钟才能在浏览器中反应，严重影响了开发者的开发体验。

浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

Vite就是在上述时代潮流下的产物，利用浏览器对ES模块的原生支持，实现快速的开发服务器启动与打包。同时，如果是Vue使用者，相信也会对尤大的新玩具Vite充满好奇，它天生就是用来提升Vue开发者的用户体验。

尤大已经在社交平台上说过，相信有一天Vite会代替vue-cli

创建Vite项目

Vite需要Node.js>=12.0.0

npm init vite@latest

yarn create vite

project-name #按提示输入项目名称
vue #按提示选择模板（支持vue-ts、vue2）

npm init vite@latest my-project-name --template vue-ts

yarn create vite my-project-name --template vue-ts

可以使用Awesome Vite仓库的社区维护模板，可以用degit工具搭建项目。

# Vue3 + TS + Tailwind CSS + element-plus
npx degit xiaoxian521/vue-pure-admin#main vite-demo3

# Vue3 + Vuex + Vue-router + TS
npx degit pohunchn/vite-ts-quick vite-demo4

配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  // root: './', // 项目根目录（index.html所在位置）
  // base: '/vite-demo2/', // 开发或生产环境服务的公共基础路径
  // publicDir: './public', // 静态资源服务的文件夹
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  clearScreen: false,
  server: {
    // host: '127.0.0.1',
    port: 9527,
    open: true,
    https: false,
    proxy: {
      '/api-name': 'http://127.0.01:8080',
      '/api-server': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        // rewrite: path => path.replace(/^\/api-server/, '')
      }
    }
  },
  build: {
    terserOptions: {
      compress: {
        drop_debugger: true, // 生产环境清除debugger
        drop_console: true // 生产环境清除console
      }
    }
  }
})