Vite构建工具

Vite简介

Vite这个单词是一个语法单词，意思是轻快。它和我们使用vue-cli的作用基本相同，都是项目初始构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的。目前还属于beta版本，还不是正式版本，且对vue只支持vue3的项目，不支持vue2的项目。

Rollup是JavaScript的模块bundler（打包器），可以将一小段代码编译为更大更复杂的内容，列如库或应用程序。

Vite特性

1、Vite主打特点就是轻快冷服务启动。冷服务：即在开发预览中，它是不进行打包的。
2、开发中可以实现热更新，也就是说开发的时候，只要已保存，结果就会更新。
3、按需进行更新编译，不会刷新全部DOM节点。这功能会加快我们的开发流程度。

Vite创建vue项目

1、生成目录

npm init vite-app 项目名称

或者

yarn create vite-app 项目名称

2、下载依赖包
进入项目

npm install

或者

yarn 

3、目录结构

• .gitignore git的一个配置文件，不想提交上传的文件，把文件名写在这里就ok了，支持通配符（如：*.local，即只要是.local结尾的都不会上传）

Vite创建react项目

1、生成目录
首先要建好项目文件，如：React-vite
然后进入文件，再执行命令

npm init vite-app --template react

2、下载依赖包
进入项目

npm install

或者

yarn 

Vite对TypeScript、CSS、JSON的支持

可直接使用

Vite中SASS使用和JSX支持

• sass
  1、安装sass

npm add -D sass

或者

yarn add -D sass

2、使用

• jsx
  
  

Vite配置文件和别名的设置

• 配置文件vite.config.js

const {resolve} = require('path')

module.exports= {
    alias: {
        '/@/': resolve(__dirname, 'src')
    }
}

• 使用
  
• 常用配置

const path = require('path')
// vite.config.js # or vite.config.ts

module.exports = {
  alias: {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
  },
  hostname: '0.0.0.0',
  port: 8080,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: './',
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  // 反向代理
  proxy: {
    '/api': {
      target: 'https://api.cn',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}