学习vite+vue3+typesScript系列文章目录
文章目录
vite+vue3+typesScript搭建
前言
搭建vite+vue3+typesScript为学习typesScript和vue3做准备。
一、搭建vite+vue3+typesScript
- 根据vite官方网站说明进行搭建,我们选择使用pnpm进行初始化
pnpm create vite
使用vscode打开
├── public 公共资源(一些静态资源存放)
├── src 程序主文件夹
├───assets 静态资源如图片等
├───components vue组件
├───app.vue vue主程序入口vue文件
├───main.ts vue主程序入口ts文件
├───style.css css文件
├───vite-env.d.ts vite env环境变量声明自定义文件
├── index.html 主程序入口文件
├── package.json ndoesjs包引入文件
├── tsconfig.json ts配置文件
├── tsconfig.node.json ts nodejs配置文件
├── vite.config.ts vite配置文件
- 进行初始化安装
pnpm i
- 进行启动是否创建成功
pnpm run dev
二、进行自定义配置
1.自定义环境配置参数文件,根据不同的环境,选择不同的env配置文件
在vite-env.d.ts 文件中进行env环境变量声明自定义
/// <reference types="vite/client" />
//使用接口定义环境参数
interface ImportMetaEnv {
// 环境
readonly NODE_ENV:string;
// 接口前缀
readonly VITE_API_BASEPATH:string;
// 打包路径
readonly VITE_BASE_PATH:string;
// 是否删除debugger
readonly VITE_DROP_DEBUGGER:boolean;
// 是否删除console.log
readonly VITE_DROP_CONSOLE:boolean;
// 是否sourcemap
readonly VITE_SOURCEMAP:boolean;
// 输出路径
readonly VITE_OUT_DIR:string;
// 标题
readonly VITE_APP_TITLE:string;
}
declare global {
interface ImportMeta {
readonly env: ImportMetaEnv
}
}
修改package.json"dev": "vite --mode base"
添加.env.base文件
# 环境
NODE_ENV=development
# 接口前缀
VITE_API_BASEPATH=base
# 项目访问前缀
VITE_BASE_PATH=base
# 是否删除debugger
VITE_DROP_DEBUGGER=false
# 是否删除console.log
VITE_DROP_CONSOLE=false
# 是否sourcemap
VITE_SOURCEMAP=true
# 输出路径
VITE_OUT_DIR=dist-base
# 标题
VITE_APP_TITLE=ElementAdmin
将页面标题改成配置文件中的标题,修改main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
const title =document.getElementsByTagName("title")[0];
title.text=import.meta.env.VITE_APP_TITLE;
console.log(import.meta.env)
console.log(title)
重启pnpm run dev
已设置成功。
三、vite.config.ts使用自定义配置参数以及如何自定义env前缀参数
修改vite.config.ts
import { UserConfig,ConfigEnv,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
//获取当前程序根路径
const root=process.cwd();
// https://vitejs.dev/config/
const userConfig= (configEnv:ConfigEnv):UserConfig=>{
//命令 如 dev build等
const command=configEnv.command;
//获取mode参数 --mode 参数
const mode=configEnv.mode;
//配置参数集合
let env:any;
if(command === "build"){
//如果是打包命令,根据mode参数,获取对应的配置参数集合 (vue-tsc && vite build) process.argv按照空格分割算下标
env=loadEnv(process.argv[4] ==="--mode"?process.argv[5]:process.argv[4],root);
}else{
env=loadEnv(mode,root);
}
return{
//vite中默认的自定义变量前缀为VITE_,如果你想不使用默认的前缀,可以在envPrefix中添加自定义前缀,例如我们添加了APP_前缀
envPrefix:["VITE_","APP_"],
base:env.VITE_BASE_PATH,
plugins:[vue()],
build:{
//terser -> 需要安装该插件 pnpm i terser -D
minify:"terser",
outDir:env.VITE_OUT_DIR || "dist",
sourcemap:env.VITE_SOURCEMAP,
terserOptions:{
compress:{
drop_console:env.VITE_DROP_CONSOLE,
drop_debugger:env.VITE_DROP_DEBUGGER
}
}
},
server:{
port:8336
}
}
}
export default userConfig ;
在vite-en.d.ts中添加以APP_前缀的变量
//自定义前缀APP_
readonly APP_NAME:string;
在.env.base中添加
APP_NAME="自定义APP_前缀变量"
在main.ts中添加
const h1= document.createElement("h1");
h1.innerHTML=import.meta.env.APP_NAME;
document.body.appendChild(h1);
修改package.json
"build": "vue-tsc && vite build --mode base"
打包测试pnpm run build
输出路径是配置中的路径。
打开页面我们自定义的值已经在页面上了。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了vite+vue3+typesScript的搭建,下一章进行集成element-plus。