学习搭建vite+vue3+typesScript

学习vite+vue3+typesScript系列文章目录

vite+vue3+typesScript搭建

前言

搭建vite+vue3+typesScript为学习typesScript和vue3做准备。

---

一、搭建vite+vue3+typesScript

1. 根据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配置文件

2. 进行初始化安装

pnpm i

3. 进行启动是否创建成功

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。