首页 前端知识 ReferenceError: require is not defined 【vue3 vite setup语法使用报错】

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

2024-04-05 09:04:41 前端知识 前端哥 340 975 我要收藏

说明

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

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

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


我这里提供两种方法:
方法1:
使用 import导入资源

<template>
  <div>
    <div> test页面 </div>
  </div>
</template>
<script setup>
import img_echarts from '@/assets/echarts/earth.jpg'
import img_bg from '@/assets/echarts/starfield.jpg'

const globe = {
		baseTexture: img_echarts ,
        environment: img_bg ,
	}
}
</script>

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

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

END

PS:来人啊,把坑埋了!打道回府。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4493.html
标签
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!