Vite-初始Vite

基础

说明

Vite作为前端构建工具的一种，主流构建工具还有如WebPack等

安装

ts
npm create vite@latest vue3-temp -- --template vue

cd .\vue3-temp\
npm install
npm run dev

初始目录说明

初始目录EG

初始目录

vite.config.js

Vite的配置项，作用和webpack.config.js一样

index.html

说明

作为Vite项目的入口文件 <div id="app"></div>定义app容器，用作挂载点 <script type="module" src="/src/main.js"></script>用作Vite解析，用于指向main.js文件

内容

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

特点

Vite天然支持TS类型的文件，但是Vite只支持TS转译工作，不支持类型检查，假设类型检查被VsCode或Vite的构建过程接管所以可以通过tsc --noEmit或者安装vue-tsc然后修改package.js中的启动脚本"dev": "vue-tsc --noEmit && vite --mode dev --host 0.0.0.0"以此进行类型检查

模式与环境变量

模式

说明

模式作为一个广泛概念，包含如开发模式、预发布模式、预上线模式、生产模式等，通过--mode表明所使用的的模式 .env.development、.env.test、.env.production；分别表示开发环境变量、测试环境变量、生产环境变量

修改package.json

vue-tsc --noEmit 忽略报错信息警告 -base=/二级目录/ 项目部署在二级目录则需要填写对应二级目录文件名 -host 0.0.0.0 设置本地开发的访问地址

json
{
  "name": "vue3-temp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode dev --host 0.0.0.0",
    "test": "vue-tsc --noEmit && vite build --mode test --base=./",
    "build": "vue-tsc --noEmit && vite build --mode production",
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}

环境变量

说明

通过DOTENV从环境目录中加载额外的环境变量

.env文件在Vite启动时会加载，在修改后需要重新启动Vite Vite执行时已存在的环境变量拥有最高优先级(即package.json的service命令中加载的环境变量)，不会被.env覆盖

注意点

若需要将环境变量暴露给客户端源码，需要以VITE\_\*开头

ts
VITE_RES_KEY=123
MGDB_PASSWORD=foobar

console.log(import.meta.env.VITE_RES_KEY) // 123
console.log(import.meta.env.MGDB_PASSWORD) // undefined

常见的环境变量文件

环境变量文件	说明
`.env`	所有情况下都会加载
`.env.local`	所有情况下都会加载，但会被 git 忽略
`.env.[mode]`	只在指定模式下加载
`.env.[mode].local`	只在指定模式下加载，但会被 git 忽略

注意点

Vite.config.ts中envPrefix选项用于设置以此项开头的需要暴露在客户端源码的环境变量，默认为'VITE';设置为空字符串时，所有环境变量都会暴露在客户端源码中，Vite会在检测后报错

ts
envPrefix:[],

读取环境变量

vite.config.ts中读取变量

需要将其改写一下，从而方便获取环境变量

ts
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import type { UserConfigExport } from 'vite';

// https://vitejs.dev/config/
export default ({ mode }): UserConfigExport => {
	/**
	 * 描述
	 * @date 用于加载自定义的env环境
	 * @param {any} 'mode': 模式，Vite启动时会自动传入启动时的指令中的参数
	 * 也可以通过 `-mode test`指定
	 * @param {any} 'process.cwd()'：返回Node.js进程的当前工作目录
	 * @returns {any} 环境变量
	 */
	const env = loadEnv(mode, process.cwd());
	console.log('env', env);
	
	return defineConfig({
		...
	})
	
}

.vue中读取变量

直接通过import.meta.env.[keys]获取对应的变量

vue
...
<script lang='ts' setup>
console.log(11, import.meta.env);
</script>
...