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

最新推荐文章于 2025-06-10 10:54:08 发布
原创 最新推荐文章于 2025-06-10 10:54:08 发布 · 4.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍如何在Webpack的生产配置文件中设置publicPath属性为'./'，以确保资源文件能够被正确引用。

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

Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
🏆 前端领域优质创作者
09-07 1万+
vue3vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3vite打包后双击本地运行，vue3vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3vite打包后如何本地查看网站，vue3vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
vue项目打包后打开index.html一片空白
ai
03-16 2314
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
Vue 2项目打包后dist中index.html用浏览器无法直接打开
最新发布
白白白鲤鱼的博客
06-10 1287
Vue 2项目打包后dist中index.html用浏览器无法直接打开
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
ABC__789的博客
01-30 1373
解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问解决方法-直接打开访问是空白的解决方法
厚积薄发.
08-08 5970
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问-直接打开访问是空白的解决方法。这个就是以 http 协议来打开 网页。这样上面两种方法都可以打开打包好的 dist 下面的网页。vue-cli 默认的需要http协议才能打开，这里需要配置一行代码即可解决！如果不加，打开是空白的额，需要在服务器上，即使用 http 协议才能打开！......
vue打包dist后进入index.html出现空白页面，无法显示问题
cuicanxinghui的博客
12-23 951
Failed to load resource: net::ERR_FILE_NOT_FOUND app.e0d7d359.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND chunk-vendors.fc58545c.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND app.dea73b0f.css:1 Failed to load r
vue-cli打包后本地运行dist文件中的index.html操作
10-14
描述中提到的直接打开index.html会报错，这是因为直接打开HTML文件在浏览器中可能会因为缺少运行环境、CSS加载不正确、JavaScript执行错误等原因而导致无法正常显示。因此，我们需要一个本地服务器来正确地加载和...
vue-cli3 封装axios请求 + vue.config.js文件简单配置+ 多环境打包配置
weixin_45168482的博客
03-04 1100
在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
windows下安装配置vue开发环境，并使用vue-cli脚手架搭建一个基于 webpack 模板的vue项目（创建-打包-构建解释）
aigoV的博客
09-02 1228
写在前面： 本人后端dog，项目开发可能要涉及前端vue，遂学。下面主要从两个部分，基于实际开发需求，以前端小白的心态做一些学习和实践的记录和总结： 第一部分，详细描述Windows 下vue开发环境的安装配置 第二部分，超详细且浅显讲如何使用vue-cli脚手架搭建一个基于 webpack 模板的vue工程 一、鸟瞰Vue开发的环境需求 vue.js所有的环境基础包括： Node.js...
利用http-server测试vue-cli打包后的项目
qq_33718889的博客
03-22 1408
  目前在学习Vue，利用vue-cli脚手架开发的项目，在生产环境中(npm run dev)一切良好，根据官方的npm run build打包后发现，在自己没有线上服务器的情况下，测试成为一大难题。 1. 打包测试（搭建服务器）   打包后的代码必须放在服务器下才能运行，直接双击index.html是不行的。   下面介绍一种利用node.js的 http-server搭建一个简单的http服...
解决Vue3项目打包后dist中的index.htm无法用浏览器直接打开
普通人一枚
12-09 4162
创建一个服务器来访问资源（最简单了，不过要有环境，普通电脑还是不行，其他方式参考其他帖子）：可以打开浏览器在localhost:8080中查看了，访问成功！
vue/react打包文件可直接浏览器打开
放飞的博客
03-13 1673
之前我们使用vue/react 打包 npm run build 之后生成的dist 文件，想要运行代码，需要部署在nginx上面才能运行。配置文件也比较麻烦。 现在分享一个直接可以浏览器打开的方法 通过cmd命令 先在全局中安装browser-sync npm install -g browser-sync cd ‘dist文件目录’ browser-sync start --server --files "*.css, *.html , *.js" --reload-delay 800 -no-gh
Vite打包后的dist不能直接在浏览器打开吗
知行合一，跬步致远
06-06 4582
先来看看Vite打包后生成的index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Vue3 Vite项目打包后，双击dist中index无法打开网页（以file协议访问）
fan786005691的博客
05-09 4334
本人需求是将vue+vite项目打包后，可以直接通过双击dist中index.html打开网页,也就是以（以file协议访问），达到类似原生html的效果。目的是为了将该网页嵌入到其他程序中，且能通过file协议访问本地路径图片。默认的打包方式不支持直接打开，需要开服务来访问。实现思路是通过plugin-legacy来实现。
让 VIte+Vue3 打包的项目，在本地可以双击 index.html 打开运行
11-25 5559
的方式运行，双击 index.html 是无法运行的。通常Vue3打包的项目只能放在web服务器里面，用。如果要在本地运行，可以按照下面的步骤来实现。
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9772
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
浏览器查看vue打包后的dist
sinat_42501006的博客
05-18 441
全局安装 npm install -g live-server dist目录下cmd live-server --port=8080
vue打包后，静态资源通过URL访问不到
qq_35966054的博客
03-12 2121
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项目打包，如何双击index.html即可静态访问
09-11
在Vue项目中，要实现双击index.html文件即可静态访问，通常需要通过构建（build）过程生成静态的HTML、CSS和JavaScript文件。以下是实现这一目标的一般步骤： 1. 首先，在项目根目录下打开命令行界面，执行构建命令： ``` npm run build ``` 这个命令通常会在`package.json`中定义，并且会调用Vue CLI（或你使用的构建工具）来编译你的源代码，并输出到`dist/`文件夹中。 2. 构建完成后，你会在项目目录下看到一个`dist/`文件夹，里面包含了打包后生成的静态资源文件，如`index.html`。 3. 在`dist/`文件夹中，将`index.html`文件设置为允许作为网页打开。这通常意味着需要设置正确的HTTP服务器或Web服务器来提供静态文件服务。如果你只是想在本地双击打开`index.html`，你可能需要确保该文件没有被设置为不能直接打开。如果你在开发环境中已经启用了本地服务器，那么停止该服务器，双击`index.html`文件，它将通过默认的浏览器打开。 4. 如果想要让其他用户或设备也能访问这个`index.html`文件，你需要将整个`dist/`目录部署到一个Web服务器上。这可以通过FTP上传到你的网站服务器，或者使用云服务（如Amazon S3、阿里云OSS等）来托管静态网站。 5. 配置Web服务器以正确地提供静态文件。如果使用HTTP服务器软件（如Nginx或Apache），确保配置文件（如nginx.conf）中指定了静态文件的根目录为`dist/`文件夹。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值