vite项目yarn build打包后，index.html打不开,原因是公共基础路径base的配置问题

最新推荐文章于 2025-03-05 17:28:09 发布

烟火的降落

最新推荐文章于 2025-03-05 17:28:09 发布

阅读量1.8k

点赞数 1

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/Frank_colo/article/details/131182766

版权

文章讲述了在1vite.production.ts文件中，将base设置为/导致src路径成为绝对路径，从而在本地开发服务器无法正常启动的问题。通过将base改为./，重新打包后，src路径变为相对路径，问题得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 vite.production.ts文件中的base为 /

2 打开dist包，打开index.html

3 src的路径是绝对路径 /，因该是相对路径 ./

4 启动本地的开发服务器，没找到

5 将base 改为 ./

6 重新打包，src的路径变成了 ./

7 可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

烟火的降落

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于 vite.config.js 相关配置，拿走不谢

m0_67390969的博客

03-06

1360

使用 vite 创建项目完成后会自动生成一个 vite.config.js 代码如下： import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], }) 当以命令方式运行 vite 时，vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时，在开发环境下运行都是正常的，但是打包上线的时候就会出

将web项目打包成electron桌面端教程（一）vue3+vite+js

i-cat的博客

06-05

3426

vue2或者vue3的打包方式不同，如果你的项目不是vue3，就不用再往下看了哈，再找找别的教程~

参与评论您还未登录，请先登录后发表或查看评论

vite vue项目打包后双击index.html(file://...)无法正常浏览解决

优快云_LuoYang的博文

09-01

2617

写一个Webview本地加html的项目，html用vite vue3写，打包后http访问没有问题，放在APP内file访问白屏报错，问题解决方法记录。

vant4+vue3+ts执行打包编译后 index.html打开显示空白

最新发布

Sol的博客

03-05

298

如果你配置了路由，history 选 createWebHashHistory()4.重新执行 npm run build 就可以打开了。2.配置 vite.config.js。

vite build打包后页面不能正常访问解决方法

qq_39111074的博客

04-19

6539

vite build打包后页面不能正常访问解决方法

解决vite打包之后项目在本地无法打开得问题

m0_64810484的博客

11-06

1635

在vite项目打包时,只配置base得情况下,如果在本地浏览器中打开此项目会报如下错误。使用 @vitejs/plugin-legacy 插件。

用vite 打包之后项目不能在本地查看

Hermia_yuan的博客

06-25

659

用vite 打包之后项目不能在本地查看

[vite] 项目打包后页面空白,配置了base后也不生效

jinwenshuo2007的博客

08-16

6230

vite打包项目后页面空白,配置了base和history也没用的，看这里

vite-plugin-pwa：Vite的零配置PWA

02-05

npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D 将其添加到vite.config.js // vite.config.js import { VitePWA } from 'vite-plugin-pwa' export default { plugins : [ VitePWA

从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios

on1yLX的博客

08-09

1158

postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖。然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view。

Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）

youyacoder的博客

10-06

4509

在项目或产品的迭代过程中，通常会有多套环境，常见的有：devsituatpreprod环境之间配置可能存在差异，如接口地址、全局参数等。在基于的项目中只需要添加.env.xxx文件，然后在的scripts启动或打包命令中指定mode参数即可，获取环境变量时使用。vite使用方式类似，但获取环境变量使用。

详解Vite创建Vue3项目+vue-router+ts+vite+element-plus

qq_44552416的博客

01-17

2331

在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。

Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误；关于vite build后访问报错

热门推荐

qq_44535402的博客

07-20

1万+

关于Vite打包后本地访问打包文件空白页面；关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “

Vite打包后index.html空白

YJH15888673903的博客

01-13

1290

找到vite.config.js文件（没有就自己创建一个）里面加上 base: "./",然后用打开。

解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题

weixin_56035334的博客

07-11

7883

1.github是不是不能部署带有接口项目的前台电商项目啊是不是得买服务器才能在线看啊静态的我会部署，但是这个电商项目带了接口，我想应该不可以就这样放上去的 2.用npm run bulid打包后的index是不是不能直接打开。我百度了方法，都是让我改路径，但是他们都用webpack打包的，我这个是用npm init初始化的，并没有webpack下面的路径，所以我也改不了 3.那要怎么把这个前台项目部署到服务器上呢，是不是只能买个服务器来部署呀！！我主要想实现在线预览，给别人也可以看到做过的项目，

vue3 vite v-html中运行传统html文档时，js不能运行的解决方案

dugucike的专栏

06-08

1254

用script标签引用的时候路径这么用：/jquery-3.6.4.min.js。2,App.vue中测试使用代码如下:（内容很简单，源码直接上图了）

解决vite打包后，index页面空白，静态资源引入路径错误

like_a_diamond的博客

01-04

3098

使用vite打包时，静态资源加载败，本文为图片路径的写法，保证项目在生产环境及开发环境正常显示

解决vite打包的项目不能直接用浏览器运行HTML文件

m0_66687901的博客

11-03

3175

1.安装插件@vitejs/plugin-legacy 2.配置vite.config.ts（没有就找vite.config.js） 3.配置路由 4.修改打包后的index.html文件

【问题记录】关于vue-cli项目build后，index.html无法在浏览器打开

Kuroko's Development Notes

08-27

3796

第一种如图：打包后的index.html加载资源失败 > 提示报路径错误 > 需要我们对build操作进行一些path上的调整！具体如下： 1、静态资源的绝对路径改为相对路径 config --> index.js --> build:{ assetsPublicPath: './' } 注意斜杠前面多加一个点哦 2、添加图片资源的访问路...

vite vue3项目怎么打包

03-04

<think>好的，我现在需要帮助用户解决如何在Vite Vue3项目中打包的问题。首先，我得确认用户的具体需求和可能遇到的问题。用户已经提到了Vite和Vue3，所以应该是一个前端项目的构建问题。首先，我应该回顾一下Vite的基本打包流程。Vite是一个现代化的构建工具，默认支持Vue3，所以用户可能已经有一个项目，但需要知道如何生成生产环境的代码。通常，打包命令是`vite build`，但可能用户需要更多的细节，比如配置优化、环境变量处理、静态资源路径等。接下来，用户可能遇到的问题可能包括打包后的文件路径错误，比如静态资源找不到，或者需要配置不同的环境变量。另外，用户可能想知道如何分析打包后的文件大小，或者如何优化打包结果，比如代码分割、压缩等。然后，我需要考虑用户可能的水平。如果是新手，可能需要一步步的指导，包括安装依赖、运行命令、常见配置等。如果是有经验的开发者，可能更关注高级配置和优化技巧。但问题中没有明确说明，所以应该兼顾两者，提供基础步骤和进阶配置。此外，用户可能希望了解部署相关的注意事项，比如如何配置publicPath，或者如何处理路由为history模式时的404问题。这些都是在打包后部署到服务器时常见的问题，需要提前说明。还有，可能用户需要知道如何预览打包后的项目，使用`vite preview`命令，这在开发阶段测试生产环境构建很有用。这也是一个重要的点，应该包含在回答中。最后，确保回答结构清晰，分步骤说明，并给出代码示例和配置示例，让用户能够直接复制使用。同时，提示常见的错误和解决方案，比如环境变量的使用，路径配置错误等，帮助用户避免常见陷阱。总结一下，回答应该包括打包的基本命令、常见配置、环境变量的处理、部署注意事项、预览方法以及优化技巧。同时，提供示例代码和配置，帮助用户快速上手。需要检查是否有遗漏，比如是否提到多环境配置，或者如何集成测试等，但根据问题，重点在打包本身，所以可能不需要深入测试部分。</think>### Vite + Vue3 项目打包指南 --- #### 一、基础打包命令在项目根目录执行： ```bash npm run build # 或 yarn build ``` 默认生成 `dist` 目录（包含优化后的静态资源） --- #### 二、关键配置项（`vite.config.js`） ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], build: { outDir: 'my-dist', // 自定义输出目录 assetsDir: 'static', // 静态资源存放路径 sourcemap: true, // 生成 sourcemap minify: 'terser', // 压缩方式 (terser/esbuild) rollupOptions: { // Rollup 高级配置 output: { manualChunks: { // 代码分割配置 lodash: ['lodash'], vue: ['vue', 'vue-router'] } } } } }) ``` --- #### 三、环境变量处理 1. **创建环境文件** `.env.production`（生产环境变量）： ```bash VITE_API_BASE=https://api.yourdomain.com ``` 2. **代码中使用** ```javascript console.log(import.meta.env.VITE_API_BASE) ``` --- #### 四、部署注意事项 1. **静态资源路径** 当部署到子路径时配置基础路径： ```javascript // vite.config.js export default defineConfig({ base: '/your-subpath/' }) ``` 2. **SPA路由问题** 配置服务器重定向（以Nginx为例）： ```nginx location / { try_files $uri $uri/ /index.html; } ``` --- #### 五、高级优化技巧 1. **打包分析** 安装分析插件： ```bash npm install rollup-plugin-visualizer -D ``` 配置： ```javascript // vite.config.js import { visualizer } from 'rollup-plugin-visualizer' export default defineConfig({ plugins: [ vue(), visualizer({ open: true }) ] }) ``` 2. **CDN加速** 使用 `vite-plugin-cdn-import` 集成第三方库CDN： ```javascript import importToCDN from 'vite-plugin-cdn-import' plugins: [ importToCDN({ modules: [ { name: 'vue', var: 'Vue', path: 'https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js' } ] }) ] ``` --- #### 六、常见问题解决 1. **空白页面问题** 检查： - `publicPath` 配置是否正确 - 路由模式是否为 `history` 但服务器未配置重定向 2. **字体文件404** 添加资源类型处理： ```javascript // vite.config.js build: { assetsInclude: ['**/*.woff', '**/*.woff2'] } ``` --- #### 七、完整工作流示例 1. 开发环境启动 ```bash npm run dev ``` 2. 生产环境构建 ```bash npm run build ``` 3. 本地预览生产构建 ```bash npm run preview ``` --- 通过合理配置构建选项、环境变量和部署策略，可以显著优化Vue3应用的打包结果。建议使用 `--report` 参数分析包体积，优先优化大体积依赖。