在Vite中,如果想在打包时将所有的图片资源放在一个特定的文件夹下,你可以在vite.config.js中配置build.assetFileNames选项。这个选项可以接受一个字符串模板,你可以通过它来控制资源文件的输出路径和文件名。 Vite 的output.assetFileNames配置选项允许你自定义构建的资源文件名。这是一个高级选项,通常只有在需要特殊...
server: 开发服务器配置。 port: 设置开发服务器端口。 open: 启动开发服务器时自动打开浏览器。 resolve: 模块解析配置。 alias: 路径别名配置,例如将@映射到/src目录。 build: 构建配置。 outDir: 指定输出目录。 assetsDir: 指定静态资源目录。 实际项目中的高级配置和常用插件 1. 热重载与快速刷新 Vite内置...
optimizeDeps 配置优化依赖项的选项，使用了 esbuild。css 配置 CSS 预处理器和 PostCSS 插件。使用了 SCSS 和 Less 预处理器以及 Autoprefixer 插件。build 指定输出目录和构建选项。其中包括输出目录、代码压缩、Rollup 配置等。resolve 配置模块别名，用于在代码中使用简洁的模块路径。assetsInclude 配置需要包含的静态...
build: { target: ['modules'],//设置最终构建的浏览器兼容目标polyfillModulePreload:true,//是否自动注入 module preload 的 polyfilloutDir: 'dist',//指定输出路径assetsDir: 'assets',//指定生成静态文件目录assetsInlineLimit: '4096',//小于此阈值的导入或引用资源将内联为 base64 编码cssCodeSplit:true,/...
vite.config.ts文件中进行配置 // 用于加载 .env 文件的目录。可以是一个绝对路径,也可以是相对于项目根的路径。 envDir: 'env', 1. 2. 重启项目 可以在项目中通过import.meta.env打印当前的环境等变量相关信息 console.log('import.meta.env::', import.meta.env) ...
// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ base: '/foo/' // 开发或生产环境服务的公共基础路径 }) build.outdir 指定打包文件的输出目录。默认值为 dist ,当 dist 被占用或公司有统一命名规范时,可进行调整。 // vite.config.js import { defineConfig }...
一:vite构建项目 配置base 1、base配置打包公共路径 打开package.json 做项目时可以不去掉 好了,在以上你构建了vite,并配置了最简单的操作后,你准备配置vite.confing.ts 开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview, ...
//vite.config.jsimport{defineConfig}from'vite'exportdefaultdefineConfig({base:'/foo/'// 开发或生产环境服务的公共基础路径 }) 1. 2. 3. 4. 5. 6. build.outdir 指定打包文件的输出目录。默认值为dist,当dist被占用或公司有统一命名规范时,可进行调整。
在scanImports方法内部主要会调用 Esbuild 提供的 build 方法,如下所示。 const deps: Record<string, string> = {}; // 扫描用到的 Esbuild 插件 const plugin = esbuildScanPlugin(config, container, deps, missing, entries); await Promise.all( ...
效果: 构建后的所有静态资源路径都是相对路径。例如,./assets/main.js。 场景: 当你的应用程序可能部署在子目录(如https://example.com/subdir/)或者需要在本地文件系统中查看(如直接打开index.html文件)时使用。 示例 base: '/' 配置: exportdefaultdefineConfig({base:'/',plugins:[vue()],build:{outDir...