vitejs 官网:
另外的资源中文资源网站: https://vitejs.cn/,另一个 vitepress 文档和 https://vitejs.cn/vitepress/ https://vitepress.dev/
搭建第一个 Vite 项目
然后按照提示操作即可!
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:
查看 create-vite 以获取每个模板的更多细节:vanilla
,vanilla-ts
, vue
, vue-ts
,react
,react-ts
,react-swc
,react-swc-ts
,preact
,preact-ts
,lit
,lit-ts
,svelte
,svelte-ts
。
index.html
与项目根目录 ¶
你可能已经注意到,在一个 Vite 项目中,index.html
在项目最外层而不是在 public
文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html
是该 Vite 项目的入口文件。
多页面应用模式 ¶
假设你有下面这样的项目文件结构
在开发过程中,简单地导航或链接到 /nested/
- 将会按预期工作,与正常的静态文件服务器表现一致。
在构建过程中,你只需指定多个 .html
文件作为入口点即可:
库模式
当你开发面向浏览器的库时,你可能会将大部分时间花在该库的测试 / 演示页面上。在 Vite 中你可以使用 index.html
获得如丝般顺滑的开发体验。
当这个库要进行发布构建时,请使用 build.lib 配置项,以确保将那些你不想打包进库的依赖进行外部化处理,例如 vue
或 react
:
入口文件将包含可以由你的包的用户导入的导出:
使用如上配置运行 vite build
时,将会使用一套面向库的 Rollup 预设,并且将为该库提供两种构建格式:es
和 umd
(可在 build.lib
中配置):
推荐在你库的 package.json
中使用如下格式:
或者,如果暴露了多个入口起点:
命令行界面
在安装了 Vite 的项目中,可以在 npm scripts 中使用 vite
可执行文件,或者直接使用 npx vite
运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts:
yarn vite ---> vite
yarn build ---> vite build
yarn preview ---> vite preview
yarn build --mode=testing ---> vite build --mode=testing
自带的 2 个环境:development,production
建议的 3 个环境:development,production,testing 或者其他标签。
.env.development
.env.testing
.env.production
环境变量
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载,但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载,但会被 git 忽略
加载的环境变量也会通过 import.meta.env
以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_
为前缀的变量才会暴露给经过 vite 处理的代码。
环境加载优先级
一份用于指定模式的文件(例如
.env.production
)会比通用形式的优先级更高(例如.env
)。另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被
.env
类文件覆盖。
我在另外一个地方写的博客,先发转发到这里,方便以后复制查看。