使用vite打包时候遇到的坑

这篇具有很好参考价值的文章主要介绍了使用vite打包时候遇到的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用vite打包时候遇到的坑

最近使用vite写了一个小demo.
记录下其中感悟和遇到的"坑"

开发:

使用vite的开发过程还是很爽的

  • vite快速生成各种已经搭好的脚手架供开发者选择
  • 开发的运行速度相对于传统的webpack确实快了不少

打包:

在打包的时候遇到了一些坑

  • 打包时资源的路径问题,跟vue-cli里面一样,需要修改一下base(vue-cli中叫publicURL)使用vite打包时候遇到的坑

  • 静态资源打包问题

  • 我像往常开发一样,把静态资源放在src->assets下使用vite打包时候遇到的坑

  • 然后本地开发环境下是没有任何问题的,但是打包后我发现了问题

  • 打包后的dist文件里,并没有静态资源使用vite打包时候遇到的坑
    (我蒙了,就开始认为是不是我这个音频资源太小众了,vite没有内置相应的loader)

  • 其实就算是这种资源,使用file-loader就足以应付,经查vite中已经配置了file-loader去处理静态资源

  • 但是打包的时候一直没有把静态资源打包进dist?其实我不理解

  • 后面查vite的文档,里面说把静态资源放入public中使用vite打包时候遇到的坑

  • 试了下,放入public中之后,确实就ok了,资源跟html在同一目录下使用vite打包时候遇到的坑文章来源地址https://www.toymoban.com/news/detail-443027.html

与君共勉,使用vite的时候静态资源记得放在public下,否则打包的时候会出乎你的意料哦!

到了这里,关于使用vite打包时候遇到的坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用ffmpeg合并视频遇到的坑

    下面以Linux环境介绍为主 1.ffmpeg可执行命令不同的环境是不同的,Linux在执行命令前还需要授权。 2.合并视频命令: 坑一:其中第一个花括号替换的是可执行命令所在的绝对路径,这里必须要使用ffmpeg的绝对路径,因为把应用打成jar包是无法获取到绝对路径的,具体可参考:

    2024年02月16日
    浏览(53)
  • elasticsearch 中热词使用遇到的坑

    在使用es检索时,一般会创建索引以及索引下mapping和setting一样配置,如下: 命令创建配置方式: PUT /my_index {   \\\"settings\\\": {     \\\"number_of_shards\\\": 1   },   \\\"mappings\\\": {     \\\"properties\\\": {       \\\"title\\\": {         \\\"type\\\": \\\"text\\\"       },       \\\"releaseTime\\\": {         \\\"type\\\": \\\"date\\\"

    2024年01月19日
    浏览(45)
  • 关于navigator.clipboard.writeText使用遇到的坑

    navigator.clipboard.writeText在http协议下不可用的坑,浏览器禁用了非安全域的  navigator.clipboard  对象,安全域包括本地访问与开启TLS安全认证的地址,如  https  协议的地址、 127.0.0.1  或  localhost  。(其实主要是http属于非安全域)下面的方法属于兼容了http的

    2024年02月03日
    浏览(49)
  • pdfh5.js的使用以及遇到的坑

    pdfh5的地址: https://www.npmjs.com/package/pdfh5 在项目中引入pdfh5 完成事件on函数的事件名 遇到的坑 引入css的坑 在引入css文件的时候,官方给出了两种方式 第一种:在style标签里面通过@import \\\'pdfh5/css/pdfh5.css’方式,这种方式可能会报错 第二种:在script标签里面通过import ‘pdfh5/c

    2024年02月11日
    浏览(41)
  • 小程序页面跳转使用reLaunch遇到的坑

    开发的当前功能总共有4个页面1.2.3.4其中1为首页2为列表页3为详情页4为退货详情页 跳转顺序需要4--2 实现方式:1.redirectTo 【关闭当前页面跳转到目的页面,会造成多个列表页的关闭情况】  wx.redirectTo({        url: \\\'/packagePos/pages/pos/delivery/deliveryOrder/deliveryOrder\\\',      });

    2024年02月08日
    浏览(43)
  • 开发小程序使用 vant 遇到的坑 vant popup

    目录 vant popup vant Popover   小程序中H5页面使用van-uploader上传图片安卓手机调取相机失效问题 小程序上的vant用的是跟网页版的不一样的方法,网页版的可以使用v-model,但是小程序的要用\\\"show\\\"属性来控制显示与否。   由于是用show属性来控制,所以需要写一个close方法,这样一

    2024年02月13日
    浏览(50)
  • flutter3使用dio库发送FormData数据格式时候的坑,和get库冲突解决办法

    问题1:当你使用 FormData.from(Flutter3直接不能用) 的时候,可能会提示没有这个方法,或者使用 FormData.fromMap(flutter3的dio支持) 的时候也提示没有,这时候可能就是和get库里面的Formdata冲突了 问题1:The method \\\'fromMap\\\' isn\\\'t defined for the type \\\'FormData\\\'. (Documentation)  Try correcting the name to

    2024年01月19日
    浏览(42)
  • 项目搭建使用qiankun(乾坤),入门篇,以及遇到的坑与解决

    微前端架构具备以下几个核心价值: 技术栈无关 主框架不限制接入应用的技术栈,微应用具备完全自主权 独立开发、独立部署 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 增量升级 在面对各种复杂场景时,我们通常很难对一个已经存在的系统

    2024年02月12日
    浏览(39)
  • Python—遇到的问题,使用PyPDF2转化pdf时候遇到的各种问题。

    PDF 转化时候出现异常问题,直接出现报错,提示删除了该方法。 上传字体

    2024年02月13日
    浏览(62)
  • 容器中使用docker build提示docker: not found所遇到的坑(巨坑)

    例如在docker启动的jenkins中编写脚本的时候,docker build报错提示,docker: not found 提示:解决办法就是把宿主机的docker命令传过去 首先看一下我的启动命令,容器开启后进入容器输入docker build提示找不到docker 命令 修改docker版本,之后无压力启动

    2024年02月13日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包