# bilibili-vue3-vite-ts-pinia

**Repository Path**: FutaoSmile/bilibili-vue3-vite-ts-pinia

## Basic Information

- **Project Name**: bilibili-vue3-vite-ts-pinia
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-30
- **Last Updated**: 2022-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Typescript + Vite

- https://www.jianshu.com/p/59b54b747777
- https://www.bilibili.com/video/BV1dS4y1y7vd/?p=10&spm_id_from=pageDriver

## Vite *(veet)*
- https://vitejs.cn/guide/#index-html-and-project-root
- npx的作用是可以在node_modules下或PATH中查询可执行脚本并执行
- 查看vite支持的命令行参数: `npx vite --help`
- public目录：
  - 引入 public 中的资源永远应该使用根绝对路径 
  - 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
    public 中的资源不应该被 JavaScript 文件引用。
- 通过`vite build`执行构建，生成的文件默认在/dist文件夹下
- 可通过`vite previrew`来预览build生成的内容
  - 将在本地启动一个**静态资源服务器**
- 环境变量
  - 可通过`import.meta.env.XXX`来访问环境变量
  - vite默认的变量：
    - 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开头的环境变量才会被vite加载
    - VITE_API_DOMAIN √
    - API_DOMAIN ×
  - 为.env中的变量创建代码提示
    - 在`src/env.d.ts`中编辑:
```ts
// 我们自定义的.env环境变量的代码提示
interface ImportMetaEnv {
// 更多环境变量...
readonly VITE_APP_NAME: string,
readonly VITE_API_DOMAIN: string
}

interface ImportMeta {
readonly env: ImportMetaEnv
}
```
-默认情况下，开发服务器（dev命令）运行在development模式下，build以及serve命令运行在production模式下，即会自动加载响应模式下的环境变量
- 指定模式（环境）：可以使用 `--mode staing`
```json
  "scripts": {
    "dev": "vite --mode development",
    "simple-build": "vite build --mode production",
    "build": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview"
  },
```
- 配置文件：
  - 默认情况下会读取根目录下的`vite.config.js`
  - 指定配置文件：--config vite.config.ts
    - `"dev": "vite --mode development --config vite.config.ts"`