一、根目录下的public目录 该目录为纯静态文件,图片等放该目录后,打包构建时,vite不会做任何处理,构建为dist目录后,直接复制到images文件夹下。 那么在组件中要这样写才能正确引用这些资源: .login{background:rgba(163,203,255,0.2)url(/logo.png) no-repeat;center;} 请注意,不需要写public目录,如果你写了...
但是在打包时,Vite默认会原样保留绝对路径的引用地址,但不会保留public文件夹,即public下的static文件夹会被直接输出到dist/目录下,而没有public文件夹了。 所以虽然这两种都可以访问到本地资源,但是考虑到默认的打包处理方式,还是要去除掉/public前缀才能保证打包之后也可以正常引入静态资源。 第三种情况:新需求需要动...
在Vite中，如果想在打包时将所有的图片资源放在一个特定的文件夹下，你可以在vite.config.js中配置build...
Vite本身在开发环境下,静态资源路径是按相对路径来走的。但到了生产环境呢,Vite会根据你配置的`base`路径,把资源的路径调整得妥妥当当,确保它们能从正确的地方加载。而且Vite打包后,静态资源还会根据你的文件名生成一个哈希值,防止缓存问题,嘿嘿,防止别人把你的宝贝“偷”走,不给缓存“偷换”机会。 你是不是又想...
配置vite.config.ts中的options.resolve.alias选项: import { defineConfig } from 'vite'; export default defineConfig({ resolve: { alias: { '@public': '' } } }) 这会让Vite知道这个路径别名。 我们在小学二年级就学到过,Vite在打包时,public文件夹中的静态资源会被自动拷贝到根目录下, 所以你需要...
三、注意事项 修改输出目录后,记得更新相关路径,如:静态资源引用、服务器配置等。 在修改输出目录时,确保新目录名称不会与现有目录冲突,以免造成不必要的麻烦。 如果项目中有其他构建工具(如:Gulp、Grunt等),请参考相应文档进行输出目录的修改。
问题1:访问的文件不存在,主要是因为路径配置问题。 解决:在vite.config.js文件中配置 主要:打包静态文件必须是根路径,否则放到服务器找不到静态资源(同理于webpack中的publicPath 的配置) export default defineConfig({ ... base: "./", ... })
Vite + Vue3 + Electron 打包后静态资源路径错误 图片src 如果是动态拼接的话,路径指向会出现问题 import { ref } from "vue"; const filename = ref("vite.svg"); <template> </template> 第一个路径不正确:file:///G:/vite.svg第二个路径为:file:///G:/vite-electron/release/win-unpacked/...
// 打包配置 build: { sourcemap:true, outDir:'distp',// 指定输出路径,要和库的包区分开 assetsDir:'static/img/',// 指定生成静态资源的存放路径 rollupOptions: { output: { chunkFileNames:'static/js1/[name]-[hash].js', entryFileNames:'static/js2/[name]-[hash].js', ...