npm run build打包后index.html打开是空白的，解决方法来了

最新推荐文章于 2024-03-20 15:29:55 发布
最新推荐文章于 2024-03-20 15:29:55 发布
阅读量1.6k 收藏 2
点赞数
文章标签： javascript npm vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59226489/article/details/125628503
版权

2步走简单粗暴

1.找到build文件夹中的webpack.prod.conf.js文件

直接在    path: config.build.assetsRoot     下面添加   publicPath:'./'

2.找到build文件夹中的utils.js文件

 在       fallback: 'vue-style-loader'     下面添加        publicPath:'../../'

大功告成！！！快快npm run build吧！！！！！！！！！

西瓜爱打字
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
解决vue项目打包后打开index.html无内容，出现404问题
qq_45532769的博客
10-31 4419
解决vue项目打包后打开index.html无内容，出现404问题
vue打包后index.html,Vue通过build打包后 打开index.html页面是空白的
weixin_31951989的博客
07-10 2046
最近在build打包vue项目遇到了几个问题，如下：1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPath：'...
解决vue项目npm run bulid打包后index.html打开空白的问题
cmhahaha的博客
04-15 1358
解决vue项目npm run bulid打包后index.html打开空白的问题 通过vue cli 创建项目，并npm run build 打包后，在文件夹 dist 中点击index.html出现空白页面，且在终端中报错了 解决方法 新建一个文件vue.config.js与src文件同级 module.exports={ publicPath:'./' } 这样设置就可以了，再去打包去试试看吧 ...
npm run build打包的index.html打开白屏
最新发布
weixin_46394325的博客
03-20 256
打包文件不显示
vue.config 配置
tp27933的博客
09-25 857
這裡記錄下 練習vue時用到的config const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', outputDir: process.env.NODE_ENV === 'production' ?
vue笔记（一）
qq_44733345的博客
10-13 155
1.vue3安装 由于npm安装速度慢，所以是用淘宝镜像及其命令cnpm，使用淘宝定制的cnpm命令工具代替默认的npm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 使用cnpm命令安装模块 $ cnpm install [name] 2. npm版本升级 # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm i
关于vue打包npm run build 之后index页面打开空白问题
henghengzhao_的博客
01-22 1561
vue前端npm run build打包问题以及npm install问题
npm run build 之后生成的index.html页面打开为空白
小孙不够睡的博客
03-03 2174
解决npm build之后页面空白的问题
Vue本地执行build之后打开dist目录下index.html正常访问
BADAO_LIUMANG_QIZHI的博客
07-14 5748
场景 Vue的项目执行 npm run build 后会在本地dist下生成打包后的文件 但是此文件给后端后就能访问， 如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。 这是因为直接在本地访问打开的话，请求资源的url是如上图file://那种开头的路径，需要的是类似于 localhost:8080/这样的在服务器中的访问路径。 经过参考别人的博客，有将vue.config.js中的 publicPath: './', 改为相对路径的，但是在我这里不适用。 ...
vue项目 npm run build后 在浏览器上打开index.html常见问题
H的博客
12-11 3098
1.打开报错 解决方法 config文件里的index.js里, assetsPublicPath:'/',改成 ./ 重新build即可 2.打开后使用的icon字体图标不显示 解决方法 build文件里的utils.js里添加publicPath:'../../' ，重新build即可 ...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
npm run build 打包这些玩意
01-08
在开发Web应用时，`npm run build` 是一个常见的命令，用于将项目打包为生产环境可用的静态资源。这个过程涉及到一系列的构建步骤，包括编译、压缩、优化等，确保应用能够在部署后正常运行。以下是一些关于 `npm run...
vue.js 打包时出现空白页和路径错误问题及解决方法
12-12
我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。 解决：到config文件夹中打开index.js文件。 文件里面有两个assetsPublicPath属性，更改第一个，也...
解决vue build打包之后首页白屏的问题
08-27
在开发Vue.js应用时，我们通常会使用`npm ...综上所述，解决Vue build打包后首页白屏的问题主要涉及调整静态资源的路径配置。同时，理解其他可能的原因和采取相应的优化措施，将有助于构建更稳定、适应性强的Vue应用。
html echo错误,【解决方式】npm run build报错问题，html路径错误问题
weixin_33570610的博客
06-27 232
直接npm run build会报错如下：ERROR in static/js/0.94510c9d26edb4b687ab.js from UglifyJsUnexpected token: punc (() [./~/time-formater/lib/timeformater.js:21,0][static/js/0.94510c9d26edb4b687ab.js:41797,10]主要问题...
vue项目使用 npm run build 打包后出现样式错乱问题解决方法
giao序员
11-25 3954
检查组件内的 标签是不是没有加scoped 不加scoped打包后容易引起样式错乱 正确规范应该这样 scoped 作用style样式只在本组件内有效，防止别组件类名 或标签一样样式冲突。 ...
vue项目打包部署后中文乱码
xiejunna的博客
03-25 5396
web项目 项目框架：springmvc + vue vue项目本地调试OK，npm run build后，放到springmvc项目的webinfo目录后，再次访问，出现中文乱码情况。 解决办法： npm run build 后，index.html添加如下内容 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> ...
vue打包下来后打开的index.html页面是空白的
m0_62783418的博客
02-16 1693
对vue项目打包下来后打开的index.html页面时呈现空白的页的一种解决方法
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 1万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue2 npm run build打包后 index.js没有引入js文件
05-25
在 Vue2 中，通常我们会在 `main.js` 文件中引入其他 js 文件，然后在模板中使用这些文件中的函数、对象等。当你进行 `npm run build` 打包时，这些 js 文件会被打包进入 `index.js` 中，而不是保留成单独的文件。因此，如果你在打包后的 `index.js` 中没有找到你引入的 js 文件，那么可能是因为在打包过程中出现了错误。 首先，你需要确认你的 js 文件是否被正确地引入了 `main.js` 文件中。如果没有被正确地引入，那么在打包时就不会被包含在 `index.js` 文件中。 其次，你需要检查打包过程中是否出现了错误。你可以在命令行中运行 `npm run build` 命令来进行打包，并查看命令行中输出的信息。如果出现了错误，那么需要修复错误后重新进行打包。 最后，你可以尝试手动将 js 文件打包成单独的文件，然后在模板中引入这些文件。这样可以保证这些 js 文件不会被打包进 `index.js` 文件中，但同时也会增加页面的请求数量和加载时间。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值