vue build打包后的index文件打不开

解决Vue项目打包后无法打开的问题
最新推荐文章于 2023-09-14 17:06:03 发布
原创 最新推荐文章于 2023-09-14 17:06:03 发布 · 4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue

本文介绍了一个常见的Vue项目构建后无法直接运行的问题及其解决方案。通过使用http-server或其他类似的服务工具，可以轻松地预览和测试构建完成的Vue应用程序。

使用vue-cli构建的项目
cnpm run build后的文件打不开
这里记录下解决方案

这里写图片描述
打不开的原因是build后的文件也是需要在服务器上才能运行，自己起一个http server就可以运行了~

解决vue-cli构建的项目在build后，本地index打不开
weixin_43403746的博客
05-12 1593
时间有限，废话少说。 不需要新建什么vue.config.js文件，也不需要改路由什么的，老版本可能需要，新版本根本没有vue.config.js文件，只有build和config目录，在这里做修改即可。 1.将config目录中的index.js文件中，build里面的assetsPublicPath改一下 assetsPublicPath: './', 改成前面多加一个点就可以的，记得是build对象里面。 2.在build的utils.js里面的if（options.extract）{}里加上下面这
在脚手架vuecli怎么解决vue项目不能自动打开浏览器
User_XuKang的博客
10-29 916
1.如果是vuecli脚手架的版本在3或者4以上的用如下方法 方法一： 在项目中找到vue.config.js文件，如果没有就自己创建一个 ，加上以下代码 module.exports = { devServer: { open: true } } 方法二： 在项目中找到package.json文件在vue-cli-service serve 后面加上 --open 任选其一 2.如果是vuecli脚手架的版本在2用如下方法 首先找到confi..
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
问题 吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于发现了一个重要的点： 所有涉及到路径的地方全都是以 / 开头的 下面是吾辈打包后生成的 dist 目录 dist:. │ index.html │ └─static ├─css │ app.b7bce283257fbd427fb1dc3fea80cee1.css │ app.b7bce283257fbd427fb1dc3fea
解决vue3 vite 打包之后不能直接打开
最新发布
dashixiong47的博客
09-14 2916
vue3 vite兼容老版本
python 读取 docx 报错_Ubuntu下使用python读取doc和docx文档的内容方法
weixin_39716088的博客
12-11 327
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云官方镜像站提供CentOS、Debian、Ubuntu、 Fedora、Arch Linux、openSUSE、Gentoo、Scientific Lin...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目的创建和开发过程。打包是开发周期中的一个关键步骤，通常是将源代码转换为生产...
vue编译打包本地查看index文件的方法
08-27
本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`assetsPublicPath`参数的作用。 首先，确保你已经安装并配置了Vue CLI（Vue.js的命令行工具）。如果你还...
Vue打包后出现一些map文件的解决方法
08-28
本文将介绍如何解决Vue打包后出现.map文件的问题。 首先，理解.map文件的作用至关重要。Source Map（源码映射文件）是用于将压缩后的代码映射回原始源代码的文件，它的存在使得在浏览器的开发者工具中，即使代码...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
在npm run build执行后，会生成一个dist目录，这个目录包含了打包后的index.html文件和static文件夹。但是，Vue-cli的默认配置可能会导致在本地直接打开index.html时遇到问题。这是因为Vue-cli默认的配置是将静态...
vue cli3创建的项目，run serve能运行，run build后不能打开问题解决
没有撤退可言.
02-20 1461
Failed to load resource: net::ERR_FILE_NOT_FOUND 控制台报错。
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
weixin_56035334的博客
07-11 7968
1.github是不是不能部署带有接口项目的前台电商项目啊 是不是得买服务器才能在线看啊 静态的我会部署，但是这个电商项目带了接口，我想应该不可以就这样放上去的 2.用npm run bulid打包后的index是不是不能直接打开。我百度了方法，都是让我改路径，但是他们都用webpack打包的，我这个是用npm init初始化的，并没有webpack下面的路径，所以我也改不了 3.那要怎么把这个前台项目部署到服务器上呢，是不是只能买个服务器来部署呀！！我主要想实现在线预览，给别人也可以看到做过的项目，
vue打包文件本地打不开
github_38928905的博客
05-08 3179
这种问题通常在console中会看到index.html关联不到其他文件了。 解决：config.js中，改静态文件的引用路径‘/’改'./' build: { assetsPublicPath: './',
解决：vue打包后无法在本地正常运行
u012183426的博客
11-06 7648
解决：vue打包后无法在本地正常运行 运行打包命令：npm run build 生成了dist文件夹 点击 index.html，浏览器显示空白，原因是打包路径配置成了绝对路径：assetsPublicPath:'/', 解决办法：在config/index.js文件中将打包路径配置为相对路径：assetsPublicPath:'./',//在路径前面加一个点 ...
解决vue新项目不能自动打开浏览器
sinat_35539553的博客
05-09 555
在新项目 config配置文件里有index.js把 autoOpenBrowser: true,就好了
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问解决方法-直接打开访问是空白的解决方法
厚积薄发.
08-08 5874
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问-直接打开访问是空白的解决方法。这个就是以 http 协议来打开 网页。这样上面两种方法都可以打开打包好的 dist 下面的网页。vue-cli 默认的需要http协议才能打开，这里需要配置一行代码即可解决！如果不加，打开是空白的额，需要在服务器上，即使用 http 协议才能打开！......
解决使用Vue-cli打包，生成index.html文件无法使用浏览器打开的问题
SunShinessx的博客
03-25 1268
然后重新 npm run build 然后再双击打开build生成是index.html，即可看到效果。
vite打包静态文件打开显示空白
A_bet_of_three_years的博客
01-31 6854
vue3+vite进行打包生成的文件访问显示空白
vue3项目打包后index.html打不开是什么原因
05-25
可能有多种原因导致打包后的 `index.html` 文件无法打开，以下是一些常见的问题和解决办法： 1. 确认文件路径是否正确：检查项目中的路径是否正确，并确认打包后的文件路径是否正确。 2. 确认服务器是否设置正确：如果你是通过服务器来访问打包后的 `index.html` 文件，那么需要确认服务器是否正确配置。 3. 确认是否缺少必要的文件：检查打包后的文件中是否缺少必要的文件，如 JavaScript、CSS 文件等。 4. 确认是否使用了 Vue Router：如果你使用了 Vue Router，需要在打包后的文件中正确配置路由。 5. 确认是否使用了 Vue CLI：如果你使用了 Vue CLI 进行打包，可以尝试重新运行 `npm run build` 命令进行打包。 以上是一些常见的解决办法，如果还无法解决问题，可以根据具体情况进行调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值