编辑
2023-04-01
Vite
0
请注意,本文编写于 474 天前,最后修改于 463 天前,其中某些信息可能已经过时。

目录

基础
说明
安装
初始目录说明
初始目录EG
vite.config.js
index.html
说明
内容
特点
模式与环境变量
模式
说明
修改package.json
环境变量
说明
注意点
常见的环境变量文件
注意点
读取环境变量

基础

说明

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.tsenvPrefix选项用于设置以此项开头的需要暴露在客户端源码的环境变量,默认为'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> ...

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!