当前位置：首页 > 编程日记 > 正文

Vite4+Typescript+Vue3+Pinia 从零搭建(3) - vite配置

编程日记 2023-11-14 08:16:46

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

初始内容

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

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

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

配置别名

1. 安装 `@types/node`

npm i @types/node -D

2. 修改 `vite.config.ts`

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")
};

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

3. 使用

比如，修改 App.vue:

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

配置环境变量

1. 新建env文件

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

# 本地运行端口号
VITE_PORT = 8686

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

# 本地环境
VITE_USER_NODE_ENV = development

# 公共基础路径
VITE_PUBLIC_PATH = /

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

# 线上环境
VITE_USER_NODE_ENV = production

# 公共基础路径
VITE_PUBLIC_PATH = /

2. 环境变量统一处理

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

// 环境变量处理方法
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 文件里新增对 Recordable 和 ViteEnv 的类型定义：

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 文件夹内的文件包含进去：

"include": [ // 需要检测的文件
  "src/**/*.ts",
  "build/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "mock/*.ts",
  "types/*.d.ts",
  "vite.config.ts"
],

同理，修改 tsconfig.node.json 文件：

"include": [
  "build/*.ts",
  "types/*.d.ts",
  "vite.config.ts"
]

4. 使用

修改 vite.config.ts：

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/, "")
        }
      }
    },
  }
})

目录更新

当前项目目录如下：

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

https://www.dkcj.cn/info/223.html

原型模式 rust和java的实现

文章浏览阅读218次。意图：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。主要解决：在运行期建立和删除原型。何时使用： 1、当一个系统应该独立于它的产品创建，构成和表示时。2、当要实例化的类是在运行时刻指定时，例如，通过动态装载。3、为了避免创建一个与产品类层次平行的工厂类层次时。4、当一个类的实例只能有几个不同状态组合中的一种时。建立相应数目的原型并克隆它们可能比每次用合适的状态手工实例化该类更方便一些。如何解决：利用已有的一个原型对象，快速地生成和原型对象一样的实例。关键代码。

编程日记2023/11/14 00:15:28