## 将静态资源引入为url
```vue
...
<script lang="ts" setup>
	import imgUrl from './img.png'
	...
</script>
```




## 将静态资源引入为字符串

> 以`?raw`的后缀声明，使其引入为字符串


```vue
...
<script lang="ts" setup>
	import shaderString from './shader.glsl?raw'
	...
</script>
```

Vite-静态资源的处理

# 别名配置与代理配置
## 别名配置
### 说明
用于配置某些文件夹的路径别名，如webpack中默认配置的'@'符号



### EG
## 别名配置
### 手动配置的项目
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { dirname } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  // 配置别名
  resolve:{
    alias: {
      '@': resolve(__dirname,'src/'),
      comps: resolve(__dirname,'src/components/'),
      pages: resolve(__dirname,'src/pages/'),
      utils: resolve(__dirname,'src/utils/'),
    },
  },
  plugins: [vue()]
})
```

### 自动生成的项目
> `npm create vue@3`生成的项目

```js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default ({mode,}) => {
  /**
   * 描述
   * @date 用于加载自定义的env环境
   * @param {any} 'mode': 模式，Vite启动时会自动传入启动时的指令中的参数
   * @param {any} 'process.cwd()'：返回Node.js进程的当前工作目录
   * @returns {any} 环境变量
   */
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    // 若是部署在二级目录，则基础路径需要更改；否则为'/'当前目录
    base: env.VITE_APP_BASE || '/',
    // 插件配置
    plugins: [vue()],
    // 路径解析
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'comps': fileURLToPath(new URL('./src/components', import.meta.url)),
        'views': fileURLToPath(new URL('./src/views', import.meta.url)),
        'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
      }
    },
    
  })
}
```

## 配置代理
```js
    server: {
      host: '192.168.100.106',//设置服务启动时的IP地址，设置为0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址
      port: 9974,// 设置服务启动时的端口
      strictPort: true,// 严格按照指定端口启动服务，若是端口被占用就无法启动
      open: '/',// 服务启动后自动在浏览器打开应用且URL为此项设置的URL
      // 配置代理
      proxy: {
        // '/api'：代理对象，支持正则以'^'开头
        "/api": {
          target: "http://127.0.0.1:8334/",// 代理的目标
          changeOrigin: true,// 将主机头起点更改为代理目标的URL
          rewrite: (path) => path.replace(/^\/api/, ""),// 重写路径，替换为空
        },
      },
    },
```

## 插件配置
### 配置浏览器兼容插件
```
    npm add -D @vitejs/plugin-legacy
```

> 对应的`vite.config.js`配置

```js
// 浏览器兼容插件配置
import legacy from '@vitejs/plugin-legacy'
...

// 插件配置
plugins: [
  vue(),
  // 配置浏览器兼容插件
  legacy({
    targets: ['defaults', 'not IE 11']
  })
],
```

## 其它配置项
> `vite.config.js`初步配置EG

```js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// 浏览器兼容插件配置
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default ({commod, mode}) => {
  /**
   * 描述
   * @date 用于加载自定义的env环境
   * @param {any} 'mode': 模式，Vite启动时会自动传入启动时的指令中的参数
   * @param {any} 'process.cwd()'：返回Node.js进程的当前工作目录
   * @returns {any} 环境变量
   */
   // loadEnv(mode, process.cwd())一般为loadEnv(mode, './')
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    // 若是部署在二级目录，则基础路径需要更改；否则为'/'当前目录
    base: env.VITE_APP_BASE || '/',
    // 插件配置
    plugins: [
      vue(),
      // 配置浏览器兼容插件
      legacy({
        targets: ['defaults', 'not IE 11']
      })
    ],
    /*
     路径解析
     在搭配ts使用时，还需要同步在tsconfig.json的compilerOptions.paths中也同步配置
    */
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'comps': fileURLToPath(new URL('./src/components', import.meta.url)),
        'views': fileURLToPath(new URL('./src/views', import.meta.url)),
        'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
      }
    },
    // 用于设置以此项开头的需要暴露在客户端源码的环境变量，默认为'VITE';设置为空字符串时，所有环境变量都会暴露在客户端源码中，Vite会在检测后报错
    //envPrefix:[],
    server: {
      host: '192.168.100.106',//设置服务启动时的IP地址，设置为0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址
      port: 9974,// 设置服务启动时的端口
      strictPort: true,// 严格按照指定端口启动服务，若是端口被占用就无法启动
      open: '/',// 服务启动后自动在浏览器打开应用且URL为此项设置的URL
      // 配置代理
      proxy: {
        // '/api'：代理对象，支持正则以'^'开头
        "/api": {
          target: "http://127.0.0.1:8334/",// 代理的目标
          changeOrigin: true,// 将主机头起点更改为代理目标的URL
          rewrite: (path) => path.replace(/^\/api/, ""),// 重写路径，替换为空
        },
      },
    },
    // 构建选项
    build: {
      target: ['es2021', 'chrome100', 'safari13'],// 构建目标
      minify: 'esbuild',// 设置压缩混淆，默认为'esbuild'
      sourcemap: false,//构建后是否生成SourceMap文件
      // outDir:'dist',//指定输出目录, 默认为相对于根目录下的dist
      // assetsDir:'assets'.//指定静态资源存放目录，相对于outDir
      // chunkSizeWarningLimit:'400',//规定触发警告时的块大小(kbs为单位)
    },
  })
}

```

Vite-Vite基础配置

## 基础

### 说明

[Vite](https://cn.vitejs.dev/guide/#overview)作为前端构建工具的一种，主流构建工具还有如WebPack等



### 安装

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

cd .\vue3-temp\
npm install
npm run dev
```
## 初始目录说明

### 初始目录EG

![初始目录](https://cos.dwxzbz.com/Vite/Basiccatalog.jpg)

### 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>
...
```

Vite-初始Vite

## target
### 说明  
用于指定编译版本  



### 可选值  
ES3、ES5、ES6、ES7、ES2017、ES2018、ES2019、ES2020、ESNext 


## module  
### 说明  
用于设置TS代码所使用的模块系统  
### 可选值  

target | module的默认值 
---|---
ES3、ES5 |  CommonJS
ES6或者更高 | ES6
 
可选值：'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'


## lib
### 说明  
用于指定代码允许时所需要的库，一般默认不需要改动  
[node.js程序不需要浏览器环境，则不需要dom库，此时就可以更改]  
### 可选值  
```
'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'
```



## outDir  
### 说明  
用于指定编译后文件所在的目录  
### Eg  
```
"outDir": "./dist"
```


## outFile  
### 说明  
用于将多个ts文件编译后合并到同一个文件中  
### Eg 
```
"outFile":"./dist/app.js"
```



## allowJS  
### 说明  
是否对js进行编译，默认为false  
### Eg  
```
"allowJs": true,
```


## checkJs  
### 说明  
是否检查JS代码语法符合规范，默认为false
### Eg  
```
"checkJs":true
```


## removeComments  
### 说明  
是否在编译后移除注释  
### Eg  
```
"removeComments":true
```


## noEmit  
### 说明  
不生成编译后的文件,默认为false
### Eg  
```
"noEmit":false
```


## noEmitOnError
### 说明  
当有错误时不生成编译后的文件  
### Eg  
```
"noEmitOnError": true,
```



## strict  
### 说明  
所有严格检查的总开关  
strict开启后alwaysStrict、noImplicitAny、noImplicitAny、strictNullChecks都会开启  
strict关闭后alwaysStrict、noImplicitAny、noImplicitAny、strictNullChecks都会关闭  
### Eg 
```
"strict": true
```


## alwaysStrict  
### 说明 
用于设置编译后的文件是否启用严格模式，默认为false  
### 注意  
开启严格模式后，此时tsc编译后的js文件就会带有  
```
"use strict"
```
带有导入和导出的默认为严格模式没有此代码  
### Eg
```
"alwaysStrict": true,                             
```


## noImplicitAny  
### 说明  
禁止隐式any类型，需要显式指定类型  
### Eg  
```
"noImplicitAny": true,  
```


## noImplicitAny
### 说明 
禁止隐式this类型，需要显示指定this的类型  
### Eg  
```
"noImplicitThis": false,
```
此时使用时则需要指定this类型  


## strictNullChecks  
### 说明  
严格的检查空值  
### Eg  
```
"strictNullChecks": false,
```

TS-编译选项_compilerOptions选项

## 当前文件改动监视  
参数-w 表示watch监视当前文件
```
tsc fileName -w
```



# ts配置文件  
## 配置文件  
### 生成配置文件  
```
tsc --init
```

![tsc--init](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/init/tsc--init.jpg)  

### 指定配置文件  
```
tsc --project path/to/tsconfig.json
```



# include配置项  
## 说明 
用于指定那些文件需要被编译  

参数 | 含义
---|---
** | 表示任意目录 
*  | 表示任意文件

若指定了 files 配置项，则include的默认值为[]，否则include默认值为["**/*"]，即包含了目录下的所有文件   
## Eg
```
"include":[
    "xx/**/*"
]
```


# exclude配置项  
## 说明  
用于指定include配置中需要跳过的文件或者文件匹配路径    
## 注意   
exclude配置项只会改变include配置项中的结果  
## Eg  
```
"exclude":[
    ["node_modules", "bower_components", "jspm_packages"]
]
```


# extends配置项  
## 说明  
值为字符串，用于声明需要被继承的文件的路径  
## 注意  
TypeScript首先会加载extends的配置文件，然后使用当前的tsconfig.json文件里的配置覆盖继承的文件里的配置  
## Eg  
```
"extends":"./configs/base.json"
```


# files配置项  
## 说明  
和include类似，但是files适用于编译文件只有几个的情况下使用  
## Eg  
```
"files":[
    "dataTypeLearn.ts"
]
```

# 配置项参考  
[ts配置项参考](https://blog.csdn.net/qq_45534118/article/details/104301916)