使用Vue-cli打包，dist目录内的index.html文件双击使用浏览器打开报错

最新推荐文章于 2024-06-20 10:26:21 发布
最新推荐文章于 2024-06-20 10:26:21 发布
阅读量4.5k 收藏
点赞数
分类专栏： Webpack点滴知识 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbsyi/article/details/78033173
版权

在webpack.prod.conf.js文件中的webpackConfig找到output，添加一项 publicPath: './'

弹琴弹琴
关注
专栏目录
Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
王佳斌
09-07 1万+
vue3 vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3 vite打包后双击本地运行，vue3 vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3 vite打包后如何本地查看网站，vue3 vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3 打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
vue-cli3 封装axios请求 + vue.config.js文件简单配置+ 多环境打包配置
weixin_45168482的博客
03-04 1005
在src下创建api文件夹 –创建api.js和request.js两个文件 request.js文件中代码 import axios from 'axios' import QS from 'qs'; import { Message } from 'element-ui'; // 请求超时时间 axios.defaults.timeout = 15000; // post请求头 axios.defaults.headers.post['Content-Type'] = 'application/jso
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
ABC__789的博客
01-30 1271
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
Vue项目的详细目录结构解析
最新发布
weixin_45131680的博客
06-20 1341
我们在使用Vuevue-demo├── dist //项目构建后的输出目录├── public├── src├── tests //选装：测试模块├── ...dist—— 项目构建打包后的默认输出目录。查看详情 ->—— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->public—— 存放公共资源和项目的主入口文件index.html。查看详情 ->src—— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->test。
Vue3 Vite项目打包后，双击dist中index无法打开网页（以file协议访问）
fan786005691的博客
05-09 2383
本人需求是将vue+vite项目打包后，可以直接通过双击dist中index.html打开网页,也就是以（以file协议访问），达到类似原生html的效果。目的是为了将该网页嵌入到其他程序中，且能通过file协议访问本地路径图片。默认的打包方式不支持直接打开，需要开服务来访问。实现思路是通过plugin-legacy来实现。
让 VIte+Vue3 打包的项目，在本地可以双击 index.html 打开运行
11-25 3227
的方式运行，双击 index.html 是无法运行的。通常Vue3打包的项目只能放在web服务器里面，用。如果要在本地运行，可以按照下面的步骤来实现。
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 8868
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
描述中提到的直接打开index.html会报错，这是因为直接打开HTML文件在浏览器中可能会因为缺少运行环境、CSS加载不正确、JavaScript执行错误等原因而导致无法正常显示。因此，我们需要一个本地服务器来正确地加载和...
利用http-server测试vue-cli打包后的项目
qq_33718889的博客
03-22 1216
  目前在学习Vue，利用vue-cli脚手架开发的项目，在生产环境中(npm run dev)一切良好，根据官方的npm run build打包后发现，在自己没有线上服务器的情况下，测试成为一大难题。 1. 打包测试（搭建服务器）   打包后的代码必须放在服务器下才能运行，直接双击index.html是不行的。   下面介绍一种利用node.js的 http-server搭建一个简单的http服...
vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）
热门推荐
qq_37021104的博客
12-20 1万+
前言: 刚开始以为打包上线挺简单的，不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口...
5-5 Vue CLI多环境部署
孤注一掷的博客
02-28 518
一、增加开发和生产配置文件 这个只能访问本机，一般会添加一个不同环境的配置，如下 在web文件夹中新增 新增如下： 使用process.env.xxx读取环境变量。 然后作如下修改 双击测试 结果如下： 下面修改编译：（打成静态的包，即dist文件夹下的内容，发布的话就是发布这些静态文件） 这里可以修改启动的端口： 将axios请求域改为读配置文件： 测试结果成功： 然后添加如下： 这样使代码更加简洁 测...
vue打包后，静态资源通过URL访问不到
qq_35966054的博客
03-12 1984
vue打包后，一些静态资源通过URL访问不到 今天写微信转发，需要直接用url写分享图片的地址。不是第一次写微信转发了，以前都是我自己手copy到服务器上，发一版就要copy一次，烦不胜烦。 const shareInfo = { title: '微信转发', desc: '微信转发测试\r\n 微信转发测试', link: "https://www.xxxxxx.com", imgUrl: 'https://www.xxxxxx.cn/static/img/share
vue 打开html流_三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题...
weixin_39815925的博客
12-19 3572
index.html为什么打不开？Vue打包后生成的dist文件中的index.html，双击在浏览器中打开后发现一片空白，打开控制台有很多报错：“Failed to load resource: net::ERR_FILE_NOT_FOUND”。这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。打开index.html可以发现，css和js文件的引用使用的是绝对路径，例如：，对...
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问解决方法-直接打开访问是空白的解决方法
厚积薄发.
08-08 5424
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问-直接打开访问是空白的解决方法。这个就是以 http 协议来打开 网页。这样上面两种方法都可以打开打包好的 dist 下面的网页。vue-cli 默认的需要http协议才能打开，这里需要配置一行代码即可解决！如果不加，打开是空白的额，需要在服务器上，即使用 http 协议才能打开！......
vue-cli2设置将某个文件/文件夹打包到index.html同级目录下
LiumxCSDN的博客
09-26 415
2.在build/webpack.base.conf.js文件下使用插件,例如将目录doc打包到dist下与index.html同级目录下。3.打包前将doc目录放在与static同级目录下，执行打包命令，就可以将doc打包到dist并且与index.html目录下了。1.安装插件copy-webpack-plugin。
解决Vue3项目打包后dist中的index.htm无法用浏览器直接打开
普通人一枚
12-09 3074
创建一个服务器来访问资源（最简单了，不过要有环境，普通电脑还是不行，其他方式参考其他帖子）：可以打开浏览器在localhost:8080中查看了，访问成功！
前端打包生成的dist文件，index.html直接访问
m0_52539506的博客
09-26 2725
前端打包dist文件，直接访问index.html
vue-cli3项目打包index.html无法找到文件解决方法
m0_54177068的博客
03-16 2468
首先创建vue3项目步骤如下： 创建项目文件夹->以管理员身份运行vscode进入该文件夹->控制台->vue create 项目名称->新手选择默认配置直接回车即可。 生成项目后执行npm run serve后会得到项目入口链接如下 此时项目已经启动，再执行npm run build进行打包，出现如下报错信息 如图所示，这里默认的路径是在项目根目录下寻找，然而打包后的css和js文件在dist目录下，意思是要从绝对路径查找，这里是相对路径，解决方法如下 在vue.
vue-cli4项目打包后，双击index.html页面空白
Anny1272667988的博客
12-04 623
vue-cli4项目打包后，在解压后的dist文件夹里双击双击index.html页面空白，部署到服务器上也有问题 原因：css和js文件路径配置成绝对路径了，意思域名下就是css和js文件，不包含一二级文件 解决方法：把css和js文件配置成相对路径，vue-cli4配置通配的路径keyword为publicPath，并且在vue.config.js文件里配置，如下图： ...
Vue.js项目开发：使用vue-cli搭建脚手架指南
"这篇文档详细介绍了如何使用vue-cli搭建基于Vue.js的开发脚手架，同时涉及到了Node.js环境的安装、npm包管理工具以及Webpack自动化构建工具的使用。" 在现代前端开发中，Vue.js作为一款轻量级且功能强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值