使用 vite 构建自己的前端应用

功能

JSON

JSON 可以被直接导入 —— 同样支持具名导入

ts
// 对一个根字段使用具名导入 —— 有效帮助 treeshaking！
import { field } from './example2.json'
// 导入整个对象
import json from './example.json'

动态导入

ts
// 变量仅代表一层深的文件名。如果 file 是 foo/bar，导入将会失败
const module = await import(`./dir/${file}.js`)

环境变量和模式

'production'

应用运行的模式，可以通过 --mode <xxx> 指定，然后加载对应的 .env.xxx 文件 默认情况下, dev 命令 运行在 development 模式，而 build 命令则运行在 production 模式

NODE_ENV

与 MODE 的没有丝毫关系，是两个不同的概念 会影响 PROD 和 DEV 的行为

Commandtruefalse
NODE_ENV=productiontruefalse
NODE_ENV=developmentfalsetrue
NODE_ENV=otherfalsefalse

可以在命令行中设置，也可以在env文件中设置

bash
NODE_ENV=development vite build

ssr

import.meta.url

性能优化

  • 开发环境 和 生产环境 引入ui库的方式区分 开发和生产使用不同的入口文件

参考资料

  • vitesse

  • unplugin-vue-router 和 vite-plugin-vue-layouts 可以不用自己写路由

  • vite-plugin-webfont-dl 自动处理字体

this is footer