一、问题描述 项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。 二、产生原因及解决方法 1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…...
开发服务器启动成功后,你可以在浏览器中访问http://localhost:3009/index.html来查看你的网页。 当你完成了网页的开发并想要打包发布时,执行以下命令生成打包文件: npm run build 1. 打包文件会生成在项目根目录下的dist文件夹中,其中包括打包后的index.html文件和其他需要的文件。 基于此,您已经完成最简单的使用...
vite 打包 build 配置 杨林 热爱生活热爱工作2 人赞同了该文章 起初是这样,打包后文件是放在一个文件夹下 配置也是默认的配置 build: { rollupOptions: { input: { index: resolve(__dirname, 'index.html') }, output: { manualChunks: { 'echarts': ['echarts'] } } } }, 期望的文件打包后的目录...
首先,当我们在 vite 项目中首次启动开发服务器时,默认情况下(未指定build.rollupOptions.input/optimizeDeps.entries情况下),Vite 抓取项目目录下的所有的(config.root).html文件来检测需要预构建的依赖项(忽略了node_modules、build.outDir、__tests__和coverage)。 通常情况下,单个项目我们仅会使用单个index.html作为...
代码兼容处理:比如有的依赖代码模块格式并不是 esm 而是 commonjs,利用 esbuild 进行模块格式转换。 难点一:vite 如何从 index.html 入口分析依赖的组成?他怎么知道需要处理哪些包? esbuild 天生支持 index.html 作为入口打包 require('esbuild').buildSync({entryPoints:['index.html'],// is okbundle:true,wr...
我们都知道 vite 本身使用的 rollup 打包，vite 的插件也和 rollup 的插件机制相吻合； esbuild 是...
调用npm run dev(vite) 启动开发服务器。 首先,当我们在 vite 项目中首次启动开发服务器时,默认情况下(未指定build.rollupOptions.input/optimizeDeps.entries情况下),Vite 抓取项目目录下的所有的(config.root).html文件来检测需要预构建的依赖项(忽略了node_modules、build.outDir、__tests__和coverage)。
build: { publicDir: '.' } } 在上面的示例中,我们将 publicDir 配置为 .,表示将静态资源放在项目根目录下。这样,打包后的 index.html 文件就会出现在最外层目录下,而不是分别在每个文件夹里面。 需要注意的是,如果你的入口文件目录结构较为复杂,可能需要通过其他配置项来指定打包后的文件输出路径。例如,你可...
先执行 npm run build 命令进行打包,打包完成后打开 dist/index.html。 将index.html中所有的<script></script> 标签中的 type="module"、crossorigin、nomodule 删除。 举例 修改前 ……<scripttype="module"crossoriginsrc="./assets/index.5617d2f4.js"></script><scriptnomodulecrossoriginid="vite-legacy-...
项目的vite配置了base参数为/web2d/,开发正常,打包后在index.html引入的是/web2d/assets/xxx.js导致找不到文件,这个如何配置打包后也遵循配置的二级目录呀。 • 在vite.config.ts中的配置里添加base:'/web2d/',就当前electron-vite-vue这个项目模板build后,打开可执行文件就可以复现。如图: ...