(syntax)vite

vite

Vite 官方中文文档

• 安装
  • vue create => npm create vite
  • npm create vite@latest
  • pnpm create vite my-vue-app --template vue
  • pnpm create vite my-vue-app --template vue-ts
• 配置syntax
  • vite配置 Vite | Vite 官方中文文档

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

• web开发构建工具

  • 一个开发服务器 基于原生ES模块 模块热更新(HMR)
  • 一套构建指令 Rollup打包 预配置的 输出用于生产环境的高度优化过的静态资源

• 现实问题：缓慢的服务器启动[将应用中的模块区分为 **依赖** esbuild 预构建依赖。和 源码 原生 ESM {ES Module} 两类，改进了开发服务器启动时间] 缓慢的更新(打包器支持了动态模块热替换（HMR）)

安装

npm create vite@latest  // npm init vite-app <project-name>
yarn create vite  // yarn create vite-app <project-name>
pnpm create vite
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

npm create vite my-vue-app -- --template vue // 多一个--
npm/yarn/pnpm create vite my-vue-app --template vue

// 上面vue替代 vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts
// 社区模板
npx degit user/project my-project

npx vite // npx vite build
"scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
}

vite.config.js

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})