在Vite中,如果想在打包时将所有的图片资源放在一个特定的文件夹下,你可以在vite.config.js中配置build.assetFileNames选项。这个选项可以接受一个字符串模板,你可以通过它来控制资源文件的输出路径和文件名。 Vite 的output.assetFileNames配置选项允许你自定义构建的资源文件名。这是一个高级选项,通常只有在需要特殊...
server: 开发服务器配置。 port: 设置开发服务器端口。 open: 启动开发服务器时自动打开浏览器。 resolve: 模块解析配置。 alias: 路径别名配置,例如将@映射到/src目录。 build: 构建配置。 outDir: 指定输出目录。 assetsDir: 指定静态资源目录。 实际项目中的高级配置和常用插件 1. 热重载与快速刷新 Vite内置...
css 配置 CSS 预处理器和 PostCSS 插件。使用了 SCSS 和 Less 预处理器以及 Autoprefixer 插件。build 指定输出目录和构建选项。其中包括输出目录、代码压缩、Rollup 配置等。resolve 配置模块别名，用于在代码中使用简洁的模块路径。assetsInclude 配置需要包含的静态资源。server 配置开发服务器的选项，包括端口号、跨域...
build: { target: ['modules'],//设置最终构建的浏览器兼容目标polyfillModulePreload:true,//是否自动注入 module preload 的 polyfilloutDir: 'dist',//指定输出路径assetsDir: 'assets',//指定生成静态文件目录assetsInlineLimit: '4096',//小于此阈值的导入或引用资源将内联为 base64 编码cssCodeSplit:true,/...
那么就需要动态路由。[1] 环境: "vue": "^3.1.4" "vite": "^2.4.1" "vue-router": "^4.0.10" 之前使用 // npm run dev// 路由{component:()=>import('../../views/xxx.vue')} 但是这种写法,build 编译后找不到路径。 解决方案
开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview, 也没问题,但是在一些服务器上,使用绝对目录会导致404,所以我们需要配置为相对目录 二:路径别名 先引入path,在配置, 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
默认情况下 vite 打包后 dist 文件夹下只有 index.html vite.svg assets这三个,所有打包后的js图片css全都放在 assets 文件夹下面,和这些东西原本的路径没关系至于第二个问题,URL 是js 的 api,文档在这里,这是在 js 中执行的代码,new URL(`../assets/${name}`,import.meta.url).href 返回的是图片的...
npm run build 打包后再dist目录选中index.html 右键运行 open with Live Server,同时注意在vite.config.js中配置根路径 base:'/',不然浏览器中会报错 浏览器中显示的结果为: 但是存在一个问题是:打包后dist目录中index.html直接 live server,运行不ok 。请求数据不成功。因为请求的接口是live server重新起的服务...
// 路径解析配置 resolve: config.resolve, // 自定义资源类型 assetsInclude: config.assetsInclude, // 插件 plugins: config.plugins.map((p) => p.name), // 预构建配置 optimizeDeps: { include: config.optimizeDeps?.include, exclude: config.optimizeDeps?.exclude, ...
构建配置 (build): outDir: 'dist':设置构建输出目录为dist。 rollupOptions:自定义 Rollup 构建选项,如输入文件。 开发服务器配置 (server): port: 3000:设置开发服务器端口为 3000。 proxy:配置代理,将 API 请求代理到后端服务器。 路径别名 (resolve.alias): ...