ReferenceError: require is not defined 【vue3 +vite +setup语法使用报错】

说明

原���我们在vue2时代，可以使用require 导入静态资源，如下所示

       test页面   export default {  name: "globe",  data() {    return {       globe: {          baseTexture: require('@/assets/echarts/earth.jpg'),          environment:  require('@/assets/echarts/starfield.jpg'),    }  },  methods: {  },}

但在vue3中的vite没有require方法定义的使用，说白了就是不使用require方法进行资源的导入，而是使用新的方法。详情请看官网。

Vite官网

我这里提供两种方法：

方法1：

使用 import导入资源

       test页面   import img_echarts from '@/assets/echarts/earth.jpg'import img_bg from '@/assets/echarts/starfield.jpg'const globe = {baseTexture: img_echarts ,        environment: img_bg ,}}

方法2：

直接使用 new URL(url, import.meta.url) 语法

       test页面   const globe = {baseTexture: new URL('@/assets/echarts/earth.jpg', import.meta.url).href ,        environment: new URL('@/assets/echarts/starfield.jpg', import.meta.url).href ,}}

END

PS：来人啊，把坑埋了！打道回府。