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

最新推荐文章于 2024-09-17 14:34:08 发布

zzuli_huahua

最新推荐文章于 2024-09-17 14:34:08 发布

阅读量9.8k

点赞数 12

文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/qq_43813351/article/details/129465422

版权

在Vue2中，我们常使用require导入静态资源，但在Vue3的Vite环境中，require被弃用。文章介绍了两种在Vite中导入资源的方法：1)使用import导入；2)利用newURL结合import.meta.url。这两种方式是Vite推荐的新方法。

摘要由CSDN通过智能技术生成

说明

原本我们在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>