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：来人啊，把坑埋了！打道回府。

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。