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

最新推荐文章于 2024-06-02 00:18:06 发布
最新推荐文章于 2024-06-02 00:18:06 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： 数学建模
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frank_colo/article/details/131182766
版权

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

 2 打开dist包，打开index.html

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

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

 5 将base 改为 ./

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

 7 可以了

 

烟火的降落
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
解决vue+elementui项目打包后样式变化问题
11-19
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎， 找到了问题所在以及解决办法： main.js中的引入顺序决定了打包后css的...
[vite] 项目打包后页面空白,配置了base后也不生效
jinwenshuo2007的博客
08-16 3084
vite打包项目后页面空白,配置了base和history也没用的，看这里
vite+vant+vue打包部署到tomcat静态资源找不到页面空白问题
weixin_44132285的博客
12-11 2551
1.首先要解决的是静态资源找不到的问题 需要在vite.config.js里面配置base的根目录的路径 具体操作如下： 此时配置完成之后打包放置到tomcat上静态资源加载成功但是页面还是空白 2.需要配置路由base vite是通过传参的方式配置base的 此时配置完base后重新打包 启动tomcat 页面出来了 注意：此时的base配置的名称要和你打包后放置到tomcat webapps里面的文件名要对应 比如打包生成的是dist目录你要改成mobile目录 ...
Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec
qq_57229245的博客
03-13 1275
注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。
解决vite打包之后项目在本地无法打开得问题
m0_64810484的博客
11-06 992
在vite项目打包时,只配置base得情况下,如果在本地浏览器中打开此项目会报如下错误。使用 @vitejs/plugin-legacy 插件。
vite vue项目打包后双击index.html(file://...)无法正常浏览解决
CSDN_LuoYang的博文
09-01 1895
写一个Webview本地加html的项目，html用vite vue3写，打包后http访问没有问题，放在APP内file访问白屏报错，问题解决方法记录。
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
weixin_56035334的博客
07-11 7414
1.github是不是不能部署带有接口项目的前台电商项目啊 是不是得买服务器才能在线看啊 静态的我会部署，但是这个电商项目带了接口，我想应该不可以就这样放上去的 2.用npm run bulid打包后的index是不是不能直接打开。我百度了方法，都是让我改路径，但是他们都用webpack打包的，我这个是用npm init初始化的，并没有webpack下面的路径，所以我也改不了 3.那要怎么把这个前台项目部署到服务器上呢，是不是只能买个服务器来部署呀！！我主要想实现在线预览，给别人也可以看到做过的项目，
解决vue3 vite 打包之后不能直接打开
dashixiong47的博客
09-14 1822
vue3 vite兼容老版本
Laravel Vite 执行 npm run build 后任然无法加载编译后的文件。
qq_38316379的博客
04-13 328
Laravel Vite 执行 npm run build 后任然无法加载编译后的文件，一直加载热更新文件，网站资源加载失败，删除hot文件即可。
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决在vue项目中webpack打包后字体不生效的问题
10-18
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解Vue+elementUI build打包部署后字体图标丢失问题
11-20
错误描述： ...webpack module配置：(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
解决Vue打包后index.html页面无内容
m0_62681656的博客
06-16 460
创建 dist 文件2. 打开 index.html 后页面空白无内容发现路径少./
Vue3 vite build 之后不显示页面内容，只显示空白，也没有报错如何解决
04-11 6957
添加 base，意思是 build 之后的外部资源都从当前目录的相对路径获取。我不知道是什么原理哈，反正是管用，之前在没有使用。中关闭这个选项的，所以差不多的事应该。这样在 build 之后就能正常显示了。
vite build打包后页面不能正常访问解决方法
qq_39111074的博客
04-19 4793
vite build打包后页面不能正常访问解决方法
数学建模 —— 人工神经网络（6）
最新发布
清园暖歌的博客
06-02 793
BP人工神经网络是一种按误差逆传播算法训练的多层前馈网络，是目前应用最广泛的神经网络模型之一BP网络能学习和存贮大量的输入输出模式映射关系，而无需事前揭示描述这种映射关系的数学方程。
数学建模 —— 聚类分析（3）
清园暖歌的博客
06-02 493
聚类分析根据一批样品的许多观测指标，按照一定的数学公式具体地计算一些样品或一些参数指标的相似程度，把相似的样品或指标归为一类，把不相似的归为一类。在聚类分析中，聚类要素的选择是十分重要的，它直接影响分类结果的准确性和可靠性。而为了使不同量纲，不同取值范围的数据能够放在一起进行比较，在进行聚类分析之前，首先要对聚类要素进行数据处理。
数学建模 —— 层次分析法（2）
清园暖歌的博客
06-02 646
人们在对各层元素作比较时，尽管每一层中所用的比较尺度基本一致，但各层之间仍可能有所差异，而这种差异将随着层次总排序的逐渐计算而累加起来，因此需要从模型的总体上来检验这种差异尺度的累积是否显著，检验的过程称为层次总排序的。的不一致程度在容许范围之内，有满意的一致性，通过一致性检验。的单特征根，因而它所对应的特征向量除相差一个常数因子外是唯一的。个因素的相对重要性（或偏好优劣）的认识。对于正矩阵，有一种求特征向量的简易算法（对于准则的相对排序权重的过程称为。（2）求正互反矩阵排序向量的方法。
vite项目优化打包体积vite.config.ts怎么配置
10-25
为了优化vite项目的打包体积，可以在vite.config.ts文件中进行配置。以下是一些常用的配置选项： 1. 使用rollup-plugin-terser插件进行代码压缩，可以将代码体积进一步减小。 2. 使用vite-plugin-compression插件进行gzip压缩，可以进一步减小文件体积。 3. 使用splitChunks选项将公共代码提取出来，避免重复打包。 4. 使用tree shaking技术，只打包项目中实际使用到的代码，避免打包无用代码。 5. 使用webpack-bundle-analyzer插件分析打包后的文件，找出体积较大的文件并进行优化。 6. 配置alias选项，将一些常用的路径映射为别名，避免重复打包。 7. 配置externals选项，将一些不需要打包的依赖项排除在外，减小打包体积。 8. 配置cacheDir选项，将缓存目录设置为项目外部，避免重复打包。 以下是一个示例的vite.config.ts文件，其中包含了上述的一些优化配置： ``` import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { terser } from 'rollup-plugin-terser';import viteCompression from 'vite-plugin-compression'; export default defineConfig({ plugins: [ vue(), terser(), viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz', }), ], build: { target: 'es2015', outDir: 'dist', assetsDir: 'assets', sourcemap: false, rollupOptions: { output: { manualChunks: { vue: ['vue'], antd: ['ant-design-vue'], }, }, }, }, resolve: { alias: { '@': '/src', }, }, optimizeDeps: { include: ['axios'], exclude: ['vue-demi'], }, server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值