合集 - Vite4+Typescript+Vue3+Pinia 从零搭建

项目代码同步至码云 weiz-vue3-template
关于vite的详细配置可查看 vite官方文档,本文简单介绍vite的常用配置。

初始内容

项目初建后,vite.config.ts 的默认内容如下:

1
2
3
4
5
6
7
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})

配置别名

1. 安装 @types/node

1
npm i @types/node -D

image

2. 修改 vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// 路径查找
const pathResolve = (dir: string): string => {
return resolve(__dirname, ".", dir);
};

// 设置别名,还可以添加其他路径
const alias: Record<string, string> = {
"@": pathResolve("src"),
"@views": pathResolve("src/views"),
"@store": pathResolve('src/store/modules')
};

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias
},
})

3. 使用

比如,修改 App.vue:

1
import HelloWorld from '@/components/HelloWorld.vue'

image

配置环境变量

1. 新建env文件

根目录下新建 .env.env.development.env.production 三个文件。
.env 文件内新增内容:

1
2
# 本地运行端口号
VITE_PORT = 8686

.env.development 文件内新增内容:

1
2
3
4
5
# 本地环境
VITE_USER_NODE_ENV = development

# 公共基础路径
VITE_PUBLIC_PATH = /

.env.production 文件内新增内容:

1
2
3
4
5
# 线上环境
VITE_USER_NODE_ENV = production

# 公共基础路径
VITE_PUBLIC_PATH = /

2. 环境变量统一处理

根目录下新建 build 文件夹,其目录下新建 index.ts,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 环境变量处理方法
export function wrapperEnv(envConf: Recordable): ViteEnv {
const ret: any = {};

for (const envName of Object.keys(envConf)) {
let realName = envConf[envName].replace(/\\n/g, "\n");
realName = realName === "true" ? true : realName === "false" ? false : realName;
if (envName === "VITE_PORT") realName = Number(realName);
ret[envName] = realName;
if (typeof realName === "string") {
process.env[envName] = realName;
} else if (typeof realName === "object") {
process.env[envName] = JSON.stringify(realName);
}
}
return ret;
}

3. 环境类型定义

types\index.d.ts 文件里新增对 RecordableViteEnv 的类型定义:

1
2
3
4
5
6
7
type Recordable<T = any> = Record<string, T>;

interface ViteEnv {
VITE_USER_NODE_ENV: "development" | "production";
VITE_PUBLIC_PATH: string;
VITE_PORT: number;
}

修改 tsconfig.json 文件,将 build 文件夹内的文件包含进去:

1
2
3
4
5
6
7
8
9
10
"include": [ // 需要检测的文件
"src/**/*.ts",
"build/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"mock/*.ts",
"types/*.d.ts",
"vite.config.ts"
],

同理,修改 tsconfig.node.json 文件:

1
2
3
4
5
"include": [
"build/*.ts",
"types/*.d.ts",
"vite.config.ts"
]

4. 使用

修改 vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { defineConfig, loadEnv, ConfigEnv, UserConfig } from "vite"
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { wrapperEnv } from './build'

// 路径查找
const pathResolve = (dir: string): string => {
return resolve(__dirname, ".", dir);
};

// 设置别名,还可以添加其他路径
const alias: Record<string, string> = {
"@": pathResolve("src"),
"@views": pathResolve("src/views"),
"@store": pathResolve("src/store")
};

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const root = process.cwd()
const env = loadEnv(mode, root)
const viteEnv = wrapperEnv(env)

return {
base: viteEnv.VITE_PUBLIC_PATH,
plugins: [vue()],
resolve: {
alias
},
server: {
host: "0.0.0.0",
port: viteEnv.VITE_PORT,
https: false,
open: true,
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
"^/api": {
target: "http://192.168.1.4:8688",
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, "")
}
}
},
}
})

目录更新

当前项目目录如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|   .env
| .env.development
| .env.production
| .gitignore
| index.html
| package-lock.json
| package.json
| README.md
| tree.txt
| tsconfig.json
| tsconfig.node.json
| vite.config.ts
|
+---.vscode
| extensions.json
|
+---build
| index.ts
|
+---node_modules
+---public
| vite.svg
|
+---src
| | App.vue
| | main.ts
| | style.css
| | vite-env.d.ts
| |
| +---assets
| | vue.svg
| |
| \---components
| HelloWorld.vue
|
\---types
index.d.ts