webpack bulid后时，网页白屏,报错：导入的资源文件路径不对

最新推荐文章于 2022-11-23 02:14:29 发布
最新推荐文章于 2022-11-23 02:14:29 发布
阅读量1.7k 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31201781/article/details/78732103
版权

运行yarn run build后，打开dist中的index.html文件，发现白屏，控制台报资源文件引入路径不正确：

打包后的静态页面

很明显这是webpack build配置的问题

找到config/index.js打开
这里写图片描述

如图中assetsPublicPath：‘/’，将/改为.

然后yarn run bulid
可以发现这里写图片描述
路径全部正确了

执笔看墨花开
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 打包后页面空白_Webpack 打包太慢？来试试 Bundleless
weixin_39538687的博客
11-29 210
阿里妹导读：Webpack 将各个资源打包整合在一起形成 bundle，当资源越来越多时，打包的过程也将越来越慢。如果我们不需要打包呢？让浏览器直接加载对应的资源，是否就可以实现质的提升？本文分享基于浏览器的 ESModule 能力实现 Bundless 本地开发的相关思路、核心技术点和 Vite 的相关实现，以及在阿里供应链 POS 场景下的落地实践。文末福利：前端开发学习路线。一 ...
2.Webpack打包样式资源（入门）
weixin_48198696的博客
07-09 219
写这篇入门文也算是给自己巩固一下知识，现目前自己也在自学webpack，很多地方还有不懂得地方感谢各位提出意见。 目的：了解webpack五大核心概念中得loader属性（让webpack能够去处理那些非javaScript文件）。 注：webpack能处理js、json资源。（可自行测试）。 开始搭建webpack项目： 一、我们先创建一个项目文件夹webpack-two-css，然后在项目文件夹下创建 src 和 build 这两个文件夹： src我们用来放项目源码的位置...
Vue项目yarn build 打包后页面白屏解决方案
m0_64547949的博客
11-23 665
使用yarn build 打包后 打开页面白屏解决方案
vue 使用 webpack 打包上线后页面空白，页面报错或者资源加载不到
xiao_yu_liu的博客
09-20 3593
webpack publicPath 文档 vue router base 属性 文档 1、webpack的原因 在webpack 打包过程中，有一个配置属性，它允许您指定应用程序中所有资产的基本路径。 如果不配置这个属性，页面打包后，所有资源的加载 URl ，是默认的当前的一个路径， 但是当你放到服务器上的时候，你从浏览器请求，这个时候请求的 url 上可能会带一些路径 这个时候。...
vue使用webpack打包页面缓存白屏问题解决方法
小孩子
08-13 1532
在微信公众号使用vue开发每次打包上线都会有白屏问题，刷新一下页面就好了所以想到一个解决方法 const Version = new Date().getTime(); const env = require('../config/prod.env') const webpackConfig = merge(baseWebpackConfig, { module: { rules: ...
已经安装了html-webpack-plugin,还是报错：Error: Cannot find module ‘html-webpack-plugin’
01-08
运行起来一切成功，后来新建了build文件目录，并且将webpack.config.js移动到了build文件中， package.json中的script: scripts: { test: echo \Error: no test specified\ && exit 1, start: node ./src/koa.js,...
vue webpack build资源相对路径的问题及解决方法
10-15
主要介绍了vue webpack build资源相对路径的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
webpack3里使用uglifyjs压缩js时打包报错的解决
12-12
环境：webpac<4的场景下，安装uglifyjs。 cnpm install uglifyjs-webpack-plugin -D 安装完毕后，去npm里查看uglifyjs...执行打包命令后报错，重新浏览文档后发现该写法只适用于webpack4，而我的环境是webpack3.x，
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
在开发Vue项目时，遇到IE11浏览器白屏并报出`SCRIPT1002: 语法错误`的问题，通常是由于IE11不支持ES6语法导致的。Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些...
vue 使用webpack打包，出现路径404 ，导致白屏&webpack-bundle-analyzer使用
zoepriselife316的博客
11-17 1140
webpack-bundle-analyzer
[问题探讨]Vue打包后白屏和router-view中引用的内容无法显示
tom_wong666
09-13 3589
今天在工作中遇到Vue打包后白屏问题，问题分为两级，写出来供大家参考： 一阶段：打包后完全白屏，解决方法： 依照普通方法：修改在config文件夹下面的index.js中build模块导出的路径assetsPublicPath，assetsPublicPath默认的是’/’，也就是根目录。而打包生产文件后，index.html和static在同一级目录下面，所以改为’./’； 这样处理后...
基于webpack模板的vue项目打包后白板，还报错
m0_46678928的博客
03-22 1651
基于webpack模板的vue项目打包后白板，还报错
解决前端每次发版白屏问题的新思路（修改webpack保存上一次发版文件）
林钹渊的博客
12-04 2065
在使用vue-cli脚手架构建完项目，项目完成后，需打包上线。默认打包方式则是 npm build，然后项目根目录会生成 dist 文件夹。服务端将该文件夹替换线上即可。但是当第n（n>1）次上线后，由于在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。虽然刷新一...
webpack 前端构建
weixin_30590285的博客
06-24 76
一、建立简单的项目目录 1、创建 manager 根目录(作为项目根目录)2、执行 npm init，在根目录manager下自动生成 package.json文件3、npm install webpack --save-dev，在项目中安装 webpack npm包4、在根目录下 创建 webpack.config.js，所有的配置代码都写在里面5、在根目录创建 src 目录，包含 html目...
vue 白屏问题汇总（经过广泛用户反馈最终章）
热门推荐
superKM的博客
11-04 1万+
项目中偶尔会遇到vue 第一次打开白屏现象，针对这个问题，找了不同环境下的处理方法，留个纪念 1，ios10 出现白屏 原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时，我们错误地认为这是一个语法错误。解决方法如下： 进入build文件夹； 找到webpack.prod.conf.js文件； 在UglifyPlugin的定义里添加关于m...
webpack打包页面空白的解决方法
04-24 883
转载于:https://www.cnblogs.com/thankyouGod/p/8926776.html
vue组件中引入public文件，build打包后找不到资源报错404
vue+iview 动态渲染表格（vue.js结合iview插件）
09-16 5920
在组件中我使用object标签预览pdf文件 <object width="100%" height="100%" data="/help/help.pdf" type="application/pdf" id='help-object'> </object> 该help.pdf文件我是放在了public文件夹下（public/help/help.pdf），为了不被webpack编译（位置如图） 很开心没问题，但是build打包之后给后端，就出现问题了，该文件路径报错4
react打包放在服务器上出现空白页(即文件路径不对问题)
przlovecsdn的博客
08-16 4843
解决方式： https://stackoverflow.com/questions/38565538/create-react-app-css-and-js-path/ 在package.json中添加--- "homepage" :".", 或是直接添加文件路径，例如："homepage":"http://example.com/react" { "name": "react-.
webpack打包优化与首页白屏渲染问题【低性能移动端】解决方案
Park_Geun_hye的博客
06-04 1932
转眼间已经来到了2019年的6月份，我也已经实习半年多了，这半年尽管没有写过博客，但积累下来的经验还是不少的，日后慢慢补上 今天来讲讲的是webpack的打包优化经验，优化的角度从路由组件懒加载和常用库CDN引入两大块入手，至于nginx的Gzip还没有尝试过，后续尝试过再做补充【因为暂时手头上负责的项目都是在pad端上做的单机版应用.......】 1. 路由组件懒加载 这样在路由配置...
webpack打包单个vue文件报错：Cannot read properties of undefined (reading 'styles')
最新发布
05-22
这个错误通常是因为缺少Vue Loader插件导致的，Vue Loader可以帮助Webpack将.vue文件转换为JavaScript模块。你可以按照以下步骤来解决这个问题： 1. 安装Vue Loader插件： ``` npm install vue-loader vue-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值