1、安装 vite 插件 npmi -D vite-plugin-zip-pack 2、配置插件 vite.config.js import zipPack from "vite-plugin-zip-pack"export default defineConfig({plugins: [vue(),zipPack({inDir: 'dist',//要打包的文件夹outDir: 'dist',//打包好的 zip 文件放到哪个文件夹下outFileName: `dist.zip`,// ...
注意事项 确保图片文件已经放置在正确的目录下,并且路径正确无误。 如果使用Vite或Webpack等构建工具,确保它们已经正确配置了静态资源的处理规则。 根据项目的具体需求和构建工具的选择,选择最适合的图片引入方式。 通过以上方法,你可以在Vue 3项目中灵活地引入和使用本地图片资源。
1、在模版中使用 首先要注意这里使用的是img元素,不是el-image等图片UI组件。此时使用相对路径或绝对路径都可以。 <template> </template> 1. 2. 3. 在Vite脚手架搭建的项目中,下面几种情况都是不行滴,只能使用下面我们说的在逻辑中使用的方法! <el-image :src="require('@/assets/2.png')" /> //X...
vue3+vite引入本地图片正确方式 由于vue2项目之前是用的 webpack 所以我们引入本地图片会用 require(xxxxxx) vue3中如果用的是vite构建项目的话 ! 官网地址:静态资源处理 {#static-asset-handling} | Vite中文网 实际开发中 我是这样解决这个问题如下: const handleImgSrc = async () => { let img = awai...
你试图修改图片的引用地址,从相对路径变为绝对路径。在 Vue3 和 Vite 的项目中,通常在public文件夹中放置所有静态资源,例如图片。这些资源可以通过/直接访问。 首先,你需要确保图片文件icon_login.png确实存在于你的项目的public文件夹中。如果文件确实在那里,那么你可以通过以下方式引用图片: ...
首先,这个问题的原因跟vue无关,是vite引用只支持import,require是隔壁webpack的引用方式, vite用自身的url可以用import.meta.url来拼装项目路径,如下: 这个原理只不过是在发布的地址上去找对应图片,而且只会找项目中public文件夹下的图片资源,asset
2.本地运行项目中可以显示图片,但是发布后报Failed to construct ‘URL’: Invalid URL错误,是因为把 esbuild 构建目标设置为 es2020 或更高版本 import vue from "@vitejs/plugin-vue"; exportdefault{ base:"/", plugins: [vue()], optimizeDeps: { ...
使用unplugin-icons和unplugin-auto-import可以从iconify中自动导入图标 npm i-Dunplugin-icons 在vite.config.ts配置自动导入,新建/src/types目录用于存放自动导入函数auto-imports.d.ts和组件的TS类型声明文件components.d.ts import AutoImport from "unplugin-auto-import/vite"; ...
简介:vue3+ts+vite读取静态资源图片和环境变量 vue3是通过import.meta.env获取环境变量的 vue2是通过process.env获取环境变量的 先在tsconfig下配置"types": ["vite/client"], 我们在App.vue打印出我们的环境变量 console.log(import.meta.env,"import.meta.env.VITE_BASE_PORT"); import.meta.env[BASE_URL...
如果要在 src 中使用本地 json 文件,在 vite 项目中可以通过 import 动态导入 json 文件,并给 json url 路径后面加 "?url",否则会报警告: runtime-core.esm-bundler.js:6873[Vue warn]: Invalid prop: type check failedforprop"src". Expected String with value"[object Object]", got Object ...