vue+vite+ts 引入glsl文件报错问题

问题

当vue界面引入.glsl文件时，报错不能正常运行

解决

1、 安装依赖

npm i vite-plugin-glsl

2、配置vite

在vite.config.ts中增加代码：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import glsl from "vite-plugin-glsl";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), glsl()],
});

3、解决ts报错

此时，聪明的你会发现，代码可以正常运行了，但是

import name form "./test.glsl"

这段引入代码会报ts 错误。这是因为TypeScript编译器找不到对应的类型定义而报错。两种解决办法

1. 第一种（不推荐）：加?raw

import name form "./test.glsl?raw"

1. 第二种（推荐）：配置vite-env.d.ts

// 在项目的typings目录或直接在src目录下创建shaders.d.ts（有这个文件的可以不用另外创建）
declare module '*.glsl' {
  const value: string;
  export default value;
}