【知识学习】Vue3 + Vite + Koa + TS 项目

2023-10-16 15:08:50 浏览数 (4)

Vite TS Vue3 前端工程初始化配置

​

使用 vite 初始化项目

项目中使用的的是 vite 4.x 的版本

使用 yarn 执行

代码语言：javascript复制
yarn create vite

输入项目名称，选择 Vue， TypeScrip

按照提示执行以下命令即可

代码语言：javascript复制
 cd dandgangshucheng
 yarn
 yarn dev

启动后的初始页面如下

解决 main.ts 报错

打开项目，发现 main.ts 有报错

回想起来以前的工程里面有一个 shims-vue.d.ts 是用来解决这个的，但是现在的工程里面没有这个文件了， 取而代之的是一个 vite-env.d.ts 的文件，但是这个文件里并没有 shims-vue.d.ts 的内容。所以我需要手动添加一下。

代码语言：javascript复制
// vite-env.d.ts
declare module "*.vue" {
  import type { DefineComponent } from "vue";

  const vueComponent: DefineComponent<{}, {}, any>;

  export default vueComponent;
}

这样就不会报错，并且有类型提示了。

按理来说 Vite4.x 的版本不应该出现这种问题，可能是我哪里的配置出了问题，有了解的小伙伴可以在评论区指教一二，在此谢过了。

后来发现安装了 TypeScript Vue Plugin (Volar) 这个 vscode 的插件就不会报错 , 但是鼠标移到 App 上并没有出现类型提示。

解决引入自定义组件报错

代码语言：javascript复制
// vite-env.d.ts 或者 env.d.ts
// 解决引入vue自定义组件报错的问题
declare module '*.vue' {
  import type { ComponentOptions } from 'vue';
  const component: ComponentOptions | ComponentOptions['setup'];
  export default component;
}

自动打开浏览器

如果需要在开发环境启动后 , 自动打开浏览器 , 需要添加 --open

代码语言：javascript复制
// package.json
  "scripts": {
    "dev": "vite --open",
  },

环境变量

使用 import.meta.env 来获取环境变量

默认的环境变量有五个

  • BASE_URL: 公共基础路径
  • DEV: 当前环境是否为开发环境
  • MODE: 应用运行的模式 , 开发环境模式(development) , 生产环境模式(production)
  • PROD: 当前环境是否为生产环境
  • SSR: 是否为服务端渲染

通过在根目录添加以下文件来自定义环境变量

  • .env.production: 表示只有在生产环境下才会被加载的文件
  • .env.development: 表示只有在开发环境下才会被加载的文件
  • .env: 表示备选环境文件 , 在任何环境下都会被加载

只有以 VITE_ 为前缀的变量才可以在程序中使用

如果需要在 TS 中获取类型提示 , 要在vite-env.d.ts文件中扩展类型

代码语言：javascript复制
// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  // 更多环境变量...
}

在配置文件中使用环境变量

① 首先把默认的配置文件从 对象 的形式改为 函数 的形式

这是默认的配置文件，可以看到默认导出的是一个对象，这样的弊端就是不够灵活，不可以在代码中输入 console.log ，也没有办法获取到当前的模式（MODE）。

代码语言：javascript复制
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
})

修改成下面这样的函数形式，就可以从回调参数中获取到当前运行的模式，然后根据模式生成不同的配置对象。

代码语言：javascript复制
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig(({ mode }) => {
  console.log("


	


koa vite vue3 连接 路由 




	






	

 0 人点赞