vite-简介

本系列是作者在跟着Vite官网学习时做的笔记，可能并不详尽，读者可以到官网中查看完整内容。

搭建项目

1

npm create vite@latest

index.html 与项目根目录

项目加载流程：

index解析script标签=》main.js导入vue=》app.vue挂载index.html

命令行界面

package.json 配置项目

script为npm构建命令

1
2
3
4
5

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

dependencies为依赖包

启动项目

安装依赖

1

npm install

启动项目

1

npm run dev

生成生产环境代码

1

npm run build

本地测试应用

1

npm run preview

–port 参数来配置服务的运行端口

1
2
3
4
5

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

部署

在 vite.config.js 中设置正确的 base

环境变量和模式

环境变量

import.meta.env 对象上暴露环境变量

.env 文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码

模式

.env.mod文件，vite build的时候添加–mode mod激活环境变量，默认是production

1
2

# .env.staging
VITE_APP_TITLE=My App (staging)

1

vite build --mode staging