vite导入glsl文件时报错问题处理

前言

最近学threeJs的时候踩到的坑，当我导入glsl文件时，一直在报语法错误，类似于

Uncaught SyntaxError: Unexpected identifier 'vec3' (at vertexShader.glsl?t=1682477010496&import:1:11)

Uncaught SyntaxError: Unexpected token '{' (at vertexShader.glsl?t=1682477313589&import:2:12)

想着vec3,vec4不是系统内部定义的嘛，非常的懵逼。

解决方式

方式一：vite进行打包

只需要在导入的时候，加上这个?raw。

import vertexShader from "./shaders/flylight/vertex.glsl?raw";

方式二 webpack进行打包

在vue.config.js 中加入：

configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.glsl$/,
      use: [
        {
          loader: "webpack-glsl-loader",
        },
      ],
    });
  },

总结

记录一下这个问题。