vite + vue3 静态资源引入报错 require is not defined

冷不防 2023-10-01 19:04 17阅读 0赞

[参考vite官方解决方式][vite] 注意：这种方式无法在SSR中使用

<template>
      <div class="homePage">
        <van-swipe class="my-swipe" :autoplay="1000" indicator-color="green" height="200">
          <van-swipe-item v-for="banner in bannerList">
            <img :src="getImageUrl(banner.name)" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>
    
    <script lang="ts" setup>
    const getImageUrl = (name: string) => {
      return new URL(`../assets/img/${name}.png`, import.meta.url).href
    }
    const bannerList = [
      {
        name: 'learn',
        type: 'imge'
      },
      {
        name: 'banner',
        type: 'imge'
      },
      {
        name: 'menu',
        type: 'imge'
      }
    ]
    
    </script>

new URL(\`./img/$\{name\}.png\`, location.origin + '/src/assets/').href

其他引入方式请参考 vite官网 [静态资源处理][Link 1]

多个资源导入：

![0fa8a99243d94d2cbb23e07d17e45bef.png][]

[vite]: https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
[Link 1]: https://cn.vitejs.dev/guide/assets.html
[0fa8a99243d94d2cbb23e07d17e45bef.png]: https://img-blog.csdnimg.cn/0fa8a99243d94d2cbb23e07d17e45bef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 vite + vue3 静态资源引入报错 require is not defined

[参考vite官方解决方式][vite] 注意：这种方式无法在SSR中使用 <template> <div class="homePage">

冷不防/ 2023年10月01日 19:04/ 0 赞/ 18 阅读

相关 jQuery.js未成功引入报错，$ is not defined 或者jQuery is not defined.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

心已赠人/ 2023年06月18日 10:57/ 0 赞/ 100 阅读

相关引入layui后报错：layer is not defined

//（若想要加载多个组件，如：时间，表单可用[]) layui.use(['layer','laydate','form'],function(){

短命女/ 2023年03月13日 03:30/ 0 赞/ 112 阅读

相关 vue项目引入vue-calendar-component组件启动项目报错Clock is not defined

`vue-calendar-component` vue 日历组件，本次使用场景用于查询签到详情，对于最近6个月内的签到详情使用日历进行展示。 [vue-calendar-

分手后的思念是犯贱/ 2023年02月26日 05:24/ 0 赞/ 60 阅读

相关 Electron require is not defined

Electron 的 preload.js 里调用 nodejs 的 require 时报错：preload.js:10 Uncaught ReferenceError: gl

偏执的太偏执、/ 2023年01月20日 12:57/ 0 赞/ 91 阅读

相关 Vue 项目报错：‘$‘ is not defined ( no-undef )

错误描述 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

清疚/ 2022年12月13日 04:42/ 0 赞/ 481 阅读

相关报错“importPackage“ is not defined

在学习尚学堂视频过程中，跟着老师敲代码，但是自己的代码报错： Exception in thread "main" javax.script.ScriptExcept

￡神魔★判官ぃ/ 2022年10月31日 13:41/ 0 赞/ 129 阅读

相关 electron中JS报错：Uncaught ReferenceError: require is not defined

Electron已经发布了6.0正式版，升级后发现原来能运行的代码报错提示Uncaught ReferenceError: require is not defined

客官°小女子只卖身不卖艺/ 2022年10月19日 04:10/ 0 赞/ 100 阅读

相关 vue-cli3 npm run build报错 ,resolve is not defined

解决：在vue.config.js 文件中 module.exports 上面添加 const path = require('path') const we

深碍√TFBOYSˉ_/ 2022年09月09日 01:52/ 0 赞/ 98 阅读

相关报错 - 解决 Vue is not defined

近期在使用vue开发多页面时，发现页面会报 Vue is not defined 这样的错误，以至于页面直接崩了。这里我分享一下解决办法。一、报错 ![在这里插入

ゝ一世哀愁。/ 2021年09月09日 08:54/ 0 赞/ 2513 阅读