vite是前端代码打包的一个工具    
    
    
，首先可以通过一张图来理解vite的打包构建方式

一    
    
    
、前置知识：npm 和yarn包管理器

1     


     


     


  、npm常用命令及说明

// 查看npm版本 npm -v // 初始化一个项目     


     


     


  ，会出现一个package.json配置文件




 




 




 
，可以在后面加上-y
   

   

   

，快速跳过问答式界面 npm init // 安装依赖包 npm install // 根据项目中的package.json文件自动下载项目所需的全部依赖 npm install 包名 --save-dev (npm install 包名 -D) // 安装的包只用于开发环境     

     

     

 ，不用于生产环境 




  




  




  ，会出现在package.json文件中的devDependencies属性中    
    
    
  。 npm install 包名 --save (npm install 包名 -S) // 安装的包需要发布到生产环境的

  


  


  


，会出现在package.json文件中的dependencies属性中 // 更新 npm update 包名 // 更新指定包 // 移除依赖包 npm uninstall 包名 // 卸载指定包 // 查看 npm list // 查看当前目录下已安装的node包 npm list -g // 查看全局已经安装过的node包 npm info 指定包名 // 查看远程npm上指定包的所有版本信息 npm config list // 查看配置信息 npm ls 包名 // 查看本地安装的指定包及版本信息     
     
     
，没有显示empty npm ls 包名 -g // 查看全局安装的指定包及版本信息  




   




   




   ，没有显示empty npm root // 查看当前包的安装路径 npm root -g // 查看全局的包的安装路径 // 其他 npm config set registry https://registry.npm.taobao.org // 修改包下载源


 



 



 


，此处修改为了淘宝镜像 npm --help // 查看npm帮助命令 npm 指定命令 --help // 查看指定命令的帮助

2




 




 




 
、yarn常用命令及说明

// 初始化一个新项目 yarn init // 运行脚本 yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本 // 发布包 yarn publish // 添加依赖包 yarn add [package] // 会自动安装最新版本               ，会覆盖指定版本号 yarn add [package] [package] [package] // 一次性添加多个包 yarn add [package]@[version] // 添加指定版本的包 yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest） // 将依赖项添加到不同依赖项类别   




    




    




   ，不添加则默认安装到package.json中的dependencies里 yarn add [package] --dev 或 yarn add [package] -D // 加到 devDependencies yarn add [package] --peer 或 yarn add [package] -P // 加到 peerDependencies yarn add [package] --optional 或 yarn add [package] -O // 加到 optionalDependencies // 升级依赖包 yarn upgrade [package] // 升级到最新版本 yarn upgrade [package]@[version] // 升级到指定版本 yarn upgrade [package]@[tag] // 升级到指定tag // 移除依赖包 yarn remove [package] // 移除包 // 安装package.json里的包依赖
















，并将包及它的所有依赖项保存进yarn.lock yarn 或 yarn install // 安装所有依赖 yarn install --flat // 安装一个包的单一版本 yarn install --force // 强制重新下载所有包 yarn install --production // 只安装生产环境依赖 // 显示某个包的信息 yarn info [package] // 可以用来查看某个模块的最新版本信息 // 缓存相关 yarn cache yarn cache list // 列出已缓存的每个包 yarn cache dir // 返回全局缓存位置 yarn cache clean // 清除缓存

二
   

   

   

、创建一个vite项目

确保node版本需要在12.0以上

1     

     

     

 、安装vite官网最新版本

npm init vite@latest // 安装最新版本的vite

本文展示基于vite最新版本及vue+ts搭建项目               ，并按照指示来    



     



     



   ，运行项目

cd "项目名称" // 进入项目目录 npm instasll // 安装依赖包 npm run dev // 运行项目

2 




  




  




  、安装 vite1.x 版本

安装vite项目命令： yarn create vite-app "项目名称" 或 npm init vite-app + "项目名称"

如下：（不推荐）

至此
















，就成功创建并运行了一个vite项目


     


     


     
。

三

  


  


  


、目录结构分析

vite+vue+ts项目目录初始结构如下：

1     
     
     
、.vscode

该目录下的文件extensions.json中记录了开发工具vscode相关的配置

2  




   




   




   、node_modules

通过执行安装命令npm install或yarn自动生成的依赖包目录
 




 




 




。

3


 



 



 


、public

vite会把所有放在public文件夹下的文件都原封不动的复制到打包后的文件夹的根目录中   

   

   

 。

在使用public中的文件时需要注意点：1）应该一直使用根目录/来引用public文件夹的文件    
    
    
，如使用/favicon.ico来引用public/favicon.ico文件；2）public中的文件无法使用javascript来导入资源 

     

     

     。

4               、src

项目相关的资源代码存放位置

  




  




  




。

1）assets

用来存放项目中所有的静态资源文件（css   




    




    




   、fonts等）  


  


  


。

2）components

用来存放项目中所有的自定义组件  
     
     
     。

3）App.vue

是项目的根组件


   




   




   



。

4）main.ts

是整个项目的入口 



 



 



。

5）style.css

整个项目全局的基本样式文件表                 。

6）vite-env.d.ts

在使用ts开发的项目中     


     


     


  ，.d.ts 结尾的文件主要用于 TypeScript 识别.vue 文件




 




 




 
，.vue 文件不是一个常规的文件类型
   

   

   

，ts 是不能理解 vue 文件是干嘛的     

     

     

 ，这里就告诉 ts 




  




  




  ，vue 文件是这种类型的



    




    




    


。没有这个文件中的declare声明文件

  


  


  


，会发现 import 的所有 vue 类型的文件都会报错














。并且js本身是没有类型的     
     
     
，ts的语言服务需要.d.ts文件来识别类型  




   




   




   ，这样才能做到相应的语法检查和智能提示                 。

5
















、.gitignore

在把代码提交到git仓库时


 



 



 


，忽略的文件



     



     



     

。标识了哪些文件不需要提交到git仓库               ，里面的内容可以是具体的文件夹               、或文件后缀名   




    




    




   ，如下所示














。

6    



     



     



   、index.html

SPA 单页面应用程序中唯一的 html 页面入口文件
















，vite在开发过程中               ，以index.html为直接入口    



     



     



   ，并且会自动重新设置URL基础    
    
    
  。

在使用vue+ts+webpack打包的项目
















，其以main.ts为入口    
    
    
，而index.html则是放在public文件夹下     


     


     


  ，作为模板使用




 




 




 
，在构建资源中
   

   

   

，资源链接都会被自动注入index.html文件     

     

     

 ，可以使用<%=BASE_URL%>来插入内容


     


     


     
。

7
















、package-lock.json

包含了已安装的每个依赖项的确切版本的信息 




  




  




  ，以及代码的校验和以确保代码完全相同

  


  


  


，此文件会锁定你安装的每个依赖项的版本     
     
     
，这可以确保你不会安装不良依赖  




   




   




   ，并且会避免由于开发人员意外更改或更新版本


 



 



 


，而导致糟糕的情况               ，一般不会轻易修改这个文件
 




 




 




。简单理解就是：锁定依赖包的版本   




    




    




   ，保证其他人用npm安装项目的依赖包时
















，能得到一个相同的依赖环境   

   

   

 。如果后续开发中安装包时执行的命令是：npm install xxx@x.x.x               ，那么package-lock.json这个文件就会同步被修改 

     

     

     。

ps：如果之前在安装依赖包执行的命令不是npm而是yarn那么这个文件则不存在    



     



     



   ，而是生成一个yarn.lock文件
















，其作用也是锁定安装时的包的版本号.

8    
    
    
、package.json

项目描述文件, 里面记录了当前项目相关信息.    
    
    
，具体如下：

{ "name": "vite-project", // 项目名称 /* 主要是防止执行了npm publish发布了不想发布的包     


     


     


  ，或发布到不想发布的npm私服, 只有移除掉该属性才能执行发布命令npm publish, 如果不想每次新建项目都手动设置




 




 




 
，可以进行全局配置：npm config set init-private true */ "private": true, "version": "0.0.0", // 项目版本 /* 用于定义package.json文件和该文件所在目录根目录中.js文件和无拓展名文件的处理方式

  




  




  




。 值为moduel则当作es模块处理
   

   

   

，值为commonjs则被当作commonJs模块处理     

     

     

 ，不指定值则默认按照commonJs规范处理  


  


  


。 但无论type字段为何值 




  




  




  ，.mjs的文件都按照es模块来处理

  


  


  


，.cjs的文件都按照commonJs模块来处理 */ "type": "module", "scripts": { // scripts中配置以键值对（key：value）的形式来取“别名    
    
    
  ” "dev": "vite", // 项目运行命令     
     
     
，文中第一步运行npm run dev就是从这得到的  




   




   




   ，如果名称dev换成了serve


 



 



 


，那么在运行项目时的命令就是：npm run serve "build": "vue-tsc --noEmit && vite build", // 项目打包命令               ，打包项目时执行：npm run build "preview": "vite preview" }, // 正式环境依赖所需要的第三方模块（包）   




    




    




   ，安装命令一般是：npm install "依赖包名" "dependencies": { "vue": "^3.2.37" /* 包名: 版本号 版本号前面的符号一般有两种：~ 
















，^               ，区别： ^的意思是最近的一个大版本    



     



     



   ，比如 ^1.0.2 将会匹配所有 1.x.x, 但不包括2.x.x ~的意思是匹配最近的小版本
















，比如 ~1.0.2 将会匹配所有的1.0.x版本    
    
    
，但不匹配1.1.0 如果没有上面这2种符号     


     


     


  ，则表示安装精确的版本 */ }, /* 开发时依赖所需要的第三方模块（包）




 




 




 
，安装命令一般是：npm install -D "依赖包名"
   

   

   

，或 npm install --save-dev "依赖包名"      

     

     

 ， 如:新增sass包可执行命令npm install -D sass 或 npm install --save-dev sass 特别注意要加-dev表示是开发时用的依赖包 */ "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", // @vitejs/plugin-vue 插件会将 .vue 文件编译并拆分成三个部分 




  




  




  ，包括模版

  


  


  


，脚本和样式 "typescript": "^4.6.4", "vite": "^3.0.0", "vue-tsc": "^0.38.4" } }

9     


     


     


  、README.md

一般用于记录项目相关的说明使用  
     
     
     。

10




 




 




 
、tsconfig.json

TypeScript 编译器的配置文件     
     
     
，TypeScript 编译器可以根据它的规则来对代码进行编译


   




   




   



。

{ "compilerOptions": { "target": "ESNext", // 目标语言的版本 "useDefineForClassFields": true, // 标志用作迁移到即将推出的类字段标准版本的一部分  




   




   




   ，默认：false 



 



 



。 "module": "ESNext", // 生成代码的模板标准 "moduleResolution": "Node", // // 模块解析策略


 



 



 


，ts默认用node的解析策略               ，即相对的方式导入 "strict": true, // 是否启动所有严格检查的总开关   




    




    




   ，默认：false
















，启动后将开启所有的严格检查选项                 。 "jsx": "preserve", // 指定 jsx 格式 "sourceMap": true, // 生成目标文件的sourceMap文件 "resolveJsonModule": true, // 是否解析 JSON 模块               ，默认：false



    




    




    


。 "isolatedModules": true, // 是否将每个文件转换为单独的模块    



     



     



   ，默认：false














。 "esModuleInterop": true, // 是否通过为所有导入模块创建命名空间对象
















，允许CommonJS和ES模块之间的互操作性    
    
    
，开启改选项时     


     


     


  ，也自动开启allowSyntheticDefaultImports选项




 




 




 
，默认：false                 。 "lib": ["ESNext", "DOM"], // 指定项目运行时使用的库



     



     



     

。 "skipLibCheck": true // 是否跳过声明文件的类型检查
   

   

   

，这可以在编译期间以牺牲类型系统准确性为代价来节省时间     

     

     

 ，默认：false














。 }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // 解析的文件 "references": [{ "path": "./tsconfig.node.json" }] // 项目引用 




  




  




  ，是TS3.0 中的一项新功能

  


  


  


，它允许将 TS程序组织成更小的部分    
    
    
  。 }

更多配置及说明     
     
     
，可参看：tsconfig.json详细配置 和 ts文档

11
   

   

   

、tsconfig.node.json

vite里的插件类型配置文件  




   




   




   ，tsconfig.json文件中references字段使用


     


     


     
。

12     

     

     

 、vite.config.ts

vite构建相关配置


 



 



 


，默认内容如下：

实际开发中               ，常用配置及说明可参考如下： import { defineConfig } from vite import vue from @vitejs/plugin-vue import path from path // 需要安装的插件@types/node import viteCompression from "vite-plugin-compression"; // gzip必备插件   




    




    




   ，需要安装：npm i vite-plugin-compression -D export default defineConfig({ base: "./", // 生产环境路径
















，类似publicPath               ，./避免打包访问后空白页面    



     



     



   ，要加上
















，不然线上也访问不了 // 代理相关配置 server: { host: "localhost", // 服务器主机名 port: 3001, // 端口号 strictPort: false, // 若3000端口被占用,是否直接结束项目 https: false, // 是否开启 https open: true, // 是否自动在浏览器打开 proxy: { "/api": { target: "", // 后台接口 changeOrigin: true, secure: false, // 如果是https接口    
    
    
，需要配置这个参数 // ws: true, // websocket是否支持 rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, // 打包相关 build: { target: "es2020", //指定es版本,浏览器的兼容性 outDir: "dist", assetsDir: "assets", // 指定静态资源存放路径 // cssCodeSplit: true, // css代码拆分,禁用则所有样式保存在一个css里面 sourcemap: false, // 是否构建source map 文件 // manifest: true, // 是否在outDir中生成 manifest.json rollupOptions: { // input: /path/to/main.ts // 覆盖默认的 .html 入口 } }, resolve: { // 配置项目路径别名     


     


     


  ，在开发时不需要写完整的路径名称




 




 




 
，需要安装 @types/node
   

   

   

，执行命令npm i -D @types/node --save-dev即可 alias: { "@": path.resolve(__dirname, "src"), "@assets": path.resolve(__dirname, "src/assets"), "@components": path.resolve(__dirname, "src/components"), }, }, // 引入第三方的配置 optimizeDeps: { include: [], }, // 插件相关配置 plugins: [ vue(), viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: "gzip", ext: ".gz", }) ] })

因为项目用到了 ts     

     

     

 ，配置了路径别名后 




  




  




  ，还需要在 tsconfig.json 的配置文件中增加以下配置：

更多详情配置可查看vite官网
 




 




 




。

13 




  




  




  、其他

1）.gitignore

实际一般在开发中会涉及把代码提交到git仓库中

  


  


  


，.gitignore文件记录的就是在把代码提交到git仓库时     
     
     
，忽略的文件   

   

   

 。标识了哪些文件不需要提交到git仓库  




   




   




   ，里面的内容可以是具体的文件夹

  


  


  


、或文件后缀名


 



 



 


，如下所示 

     

     

     。

2）dist

通过执行打包命令npm run build 后生成的目录

  




  




  




。

到这就把vite项目基本的目录分析完了               ，在后续开发过程中可以自行操作添加目录等操作  


  


  


。

四     
     
     
、静态资源处理

1  




   




   




   、将资源引入为url

import imgUrl from ./img.png // 通过import导入图片时   




    




    




   ，会自动生成一个url
















，可直接使用

这种方式类似于webpack的file-loader               ，区别在于vite的import可以使用公共绝对路径  
     
     
     。

2


 



 



 


、将资源引入为字符串

import testString from ./testString?raw     



     



     



   ，只需要在引入文件时加上?raw后缀

3               、将资源引入为worker

import Worker from ./testWorker.js?worker // 只需要在文件后面加上 ?work const worker = new Worker() // 将worker作为base64字符串引入
















，则需要加上inline import WorkerBase64 from ./testWorkerBase64.js?worker&inline

五   




    




    




   、环境变量与模式

模式是指当期项目运行的环境    
    
    
，使用npm或yarn执行命令时     


     


     


  ，每个命令都可以对应一种模式




 




 




 
，默认npm run dev执行的环境是development模式
   

   

   

，npm run buid执行的环境是production模式     

     

     

 ，其他还可以自定义设置和执行命令


   




   




   



。

Vite内部会暴露出一个 import.meta.env 出来 




  




  




  ，就可以使用 import.meta.env.xxx 来获取配置的环境变量 



 



 



。

在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式                 。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL

  


  


  


，由base 配置项决定



    




    




    


。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境














。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)                 。

如果需要Vite配置环境变量和 Vue2 的配置差不多     
     
     
，依靠 .env 文件夹来实现  




   




   




   ，在src同级下创建 .env.production 和 .env.development


 



 



 


，分别表示生产环境和开发环境



     



     



     

。

除了development和production这两个模式               ，还可以自定义其他模式   




    




    




   ，通过传递--mode选项来覆盖原有的模式
















，例如要定义一个staging模式               ，需要创建对应的.env.staging文件    



     



     



   ，并执行vite build --mode staging

另一种方式修改执行的环境可以在package.json里面设置
















，然后执行对应的命令    
    
    
，之后在项目通过import.meta.env获取到环境变量值就是--mode后对应的值     


     


     


  ，如下所示执行：npm run serve

最后

参考：vite官网

文中如有理解不正确的地方




 




 




 
，还请不吝指教
   

   

   

，一起学习     

     

     

 ，一起成长~