# template-vue3-vite5-ts

**Repository Path**: niaoyu-template/template-vue3-vite5-ts

## Basic Information

- **Project Name**: template-vue3-vite5-ts
- **Description**: vue3 + vite5 + ts + tailwindcss + scss 的 demo 项目，拉取后可直接使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-16
- **Last Updated**: 2025-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Vite5 + ts(Typescript)

**Vue3 + Vite5 + ts(Typescript) + scss + TailWindcss 的 demo 项目，拉取后可直接使用**

### 安装依赖

```shell
npm i
```

### 启动开发环境

```shell
npm run dev
```

然后在8024端口访问项目，端口配置就在 .env.development 文件中，可以自行修改。

### 打包项目

```shell
npm run build
```

会生成 dist 文件夹，里面就是打包完成后的静态项目。

### 其他

环境配置，默认启动 `npm run dev` 时，启动的是开发环境，会自动载入 `.env.development` 和 `.env` 两个配置文件。

执行 `npm run build` 构建时，会自动载入 `.env.production` 和 `.env` 两个配置文件。

如果这两个环境配置无法满足要求，比如想到添加一个 **test** 的环境，则可以进行以下操作来添加：

- 添加 .env.test 配置文件，写入环境变量。

- package.json 中添加两个指令：
  - 启动 test 的开发环境： `"test": "vite --mode test"` 

  - 打包构建 test 环境的包： `"build:test": "vue-tsc -b && vite build --mode test"`

- 执行 `npm run test` 或 `npm run build:test` 时，都会自动载入 `.env.test` 和 `.env` 两个配置文件。

详见 [vite 环境变量和模式](https://cn.vitejs.dev/guide/env-and-mode) 。