Webpack打包后报错问题解决办法

最新推荐文章于 2023-05-04 21:41:46 发布
最新推荐文章于 2023-05-04 21:41:46 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： Web知识学习 文章标签： webpack打包报错 vue项目运行报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31490071/article/details/86087899
版权

最近使用Vue+WebPack进行项目开发，在完成开发后，执行npm run build生成dist文件后，打开index.html，界面一直未加载成功，通过console窗口看到所有资源文件都在报404错误。

意思很显然是路径不对，但是检查过后，感觉路径也没有大的错误，后来发现只要其实是一个特别不起眼的错误导致的。

这个是引入文件的路径地址，看起来是不是感觉没什么问题，其实是少了一个.的缘故。

那么怎么解决呢？

打开vue工程config文件下的index.js文件，这个文件就是用来配置我们在打包的时候的一些参数配置的。

修改下面这行代码：

assetsPublicPath: '/',

为以下

assetsPublicPath: './',

现在再看地址，终于对了。(注意前面的.哦~)

然后重新运行npm run build，就会发现项目可以成功运行啦，开心~

 

心若向阳无谓悲伤
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【异常】使用Webpack打包的项目，因浏览器存在缓存问题，导致控制台报错ChunkLoadError: Loading chunk failed
本本本添哥
04-12 577
为它们添加一个包含文件内容的哈希值，这样每次构建都会生成不同的文件名，从而避免浏览器缓存问题。给每次打包的文件名后面添加一个哈希值，以供浏览器区分。这样每次打包出来的js文件都不一样，也就解决了浏览器的缓存问题。控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样，说明 当前页面请求了缓存，然而由于资源文件被更新 导致找不到 出现404的情况。在浏览器中打开开发者工具（通常是按F12键），然后选择"Network"选项卡，点击"Clear cache"按钮来清除浏览器缓存。
解决vue-cli webpack打包开启Gzip 报错问题
10-16
主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
webpack 打包时出现的error错误处理
chengzhijun93的博客
09-29 3766
[webpack-cli] Failed to load ‘XXX webpack.config.js’ config [webpack-cli] Failed to load ‘XXX webpack.config.js’ config [webpack-cli] ReferenceError: Module is not defined npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! webpacksgg@1.0.0 build: webpack n
webpack打包报错 [webpack-cli] TypeError: merge is not a function
晓康的博客
10-12 2714
报错信息如下： [webpack-cli] Failed to load '/Users/xiaokang/Desktop/webpack-react-scaffold/config/webpack.prod.config.js' config [webpack-cli] TypeError: merge is not a function npm ERR! Failed at the webpack-react-scaffold@1.0.0 build script. npm ERR! This is
在react项目中使用webpack打包后点击index.html页面控制台提示Failed to load resource: net::ERR_FILE_NOT_FOUND的解决方法
weixin_39893889的博客
10-09 5298
在react项目中使用webpack打包后点击index.html页面控制台提示Failed to load resource: net::ERR_FILE_NOT_FOUND的解决方法 方法一：在package.json文件中进行如下修改 "homepage":"./" { "name": "cnode", "version": "1.0.0", "description": ""...
关于vue，使用webpack --mode=development命令时报错Failed to load ‘......webpack.config.js‘ config的问题
qq_39169713的博客
04-28 1万+
报错内容如下： E:\yygh\webpackdemo>webpack --mode=development [webpack-cli] Failed to load 'E:\yygh\webpackdemo\webpack.config.js' config [webpack-cli] ReferenceError: path is not defined at Object.<anonymous> (E:\yygh\webpackdemo\webpack.config.js:
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
这段代码会告诉`babel-loader`去处理`animejs`和`vue-particles`这两个库的ES6代码，从而解决`uglifyjs-webpack-plugin`的报错问题。 总结来说，当遇到`uglifyjs-webpack-plugin`打包Vue项目时的ES6语法错误，应...
webpack3里使用uglifyjs压缩js时打包报错的解决
12-12
环境：webpac<4的场景下，安装uglifyjs。 cnpm install uglifyjs-webpack-plugin -D 安装完毕后，去npm里查看uglifyjs...执行打包命令后报错，重新浏览文档后发现该写法只适用于webpack4，而我的环境是webpack3.x，
webpack 报错 [webpack-cli] Unable to load ‘@webpack-cli/serve‘ command
苦哈哈的博客园
12-25 2929
为开发调试方便安装 webpack-dev-server. webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。 安装 webpack-dev-server npm install webpack-dev-server@3.11.2 -D 安装完成后，执行 npm run dev 报错了！ [webpack-cli] Unable to load '@webpack-cli/serve' command [webpack-cli..
解决Webpack报错Unable to load ‘@webpack-cli/serve‘ command
m0_54088431的博客
04-05 8605
在安装webpack自动进行项目打包和构建（webpack-dev-server）， npm i webpack-dev-server@3.11.2 -D 时，出现报错，报错显示内容如下 [webpack-cli] Unable to load '@webpack-cli/serve' command [webpack-cli] TypeError: options.forEach is not a function 解决步骤： 1.无法加载“@webpack cli/service”命令,
解决Webpack打包报错[webpack-cli] Unable to load ‘@webpack-cli/serve‘ command
qq_53420511的博客
05-04 459
【代码】解决Webpack打包报错[webpack-cli] Unable to load ‘@webpack-cli/serve‘ command。
webpack安装填坑（‘webpack‘ 不是内部或外部命令，也不是可运行的程序或批处理文件）
hebian1994的博客
10-19 352
webpack安装填坑（'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件） - 如果。。。 - 博客园 webpack打包The 'mode' option has not been set,错误提示 - begrateful - 博客园 Failed to load 'E:\nodeproject\19webpack\app\webpack.config.json' config [webpack-cli] SyntaxError: E:\nodeproject\19we..
webpack报错 [webpack-cli] Unable to load ‘@webpack-cli/serve‘ command
weixin_44042453的博客
04-21 2727
webpack 中的插件
安装webpack过程中遇到的问题
FINDyoyo的博客
02-27 327
1.全局安装webpack npm install --save-dev webpack -g 输入webpack报错 2.管理员运行 window powershell 首先管理员身份运行 windows powershell ，输入Get-ExecutionPolicy ，用于获得当前的执行策略。 Set-ExecutionPolicy 命令设置/更改执行策略，选择RemoteSigned这个执行策略，这个策略既安全又可以执行本地编写的脚本 输入Y 3.总是提示安装cli npm
关于在mac下输入webpack 打包出现webpack-cli的问题解决方案
rclack的博客
11-24 1329
开始从官网下载一个nodejs   我自己下载的版本 6.12.0 https://nodejs.org/download/release/v6.12.0/  下载链接 下载完之后  图形操作安装即可 打开终端 输入 npm init   根据提示输入      完成之后  ls  会出现一个package.json文件 npm install webpack -g  全局安装  ...
webpack 打包报错
果壳世界
06-03 2198
webpack 打包报错"Failed to load***config" PS D:\Users\18734\Desktop\vscodework\guli\1010\webpack> webpack [webpack-cli] Failed to load 'D:\Users\18734\Desktop\vscodework\guli\1010\webpack\webpack.config.js' config at parse (<anonymous>) at rea
webpack打包常见报错解决方案
qq_28749759的博客
02-21 1331
学习过程问题总结
安装webpack时报错及解决的办法
热门推荐
qq_51464863的博客
02-17 1万+
本人是个新手，是跟着教程进行node的安装，安装成功后进行webpack安装时报错，也找了很多贴子都没有解决，后来误打误撞成功了。希望对一些新手起到帮助。 我的报错是这样的： 解决 方法一：在c盘找到 用户->找到.npmrc这个文件，将他剪贴到安装node文件下的node_modules下的npm下。（记得删除node_modules里的.npmrc）。 图解： 将图中文件 剪贴到 就over了。 方法二（没有尝试，应该可以）： 直接将node_modules
nestjs+webpack打包后报错：const toHexoId = hexoid(25); TypeError: hexoid is not a function
最新发布
06-09
这个问题可能有以下几种可能的原因： 1. 没有正确安装 hexoid 库：需要检查项目的依赖中是否已经安装了 hexoid 库，如果没有安装，需要通过 npm 安装该库。 2. hexoid 版本不兼容：如果项目中已经安装了 hexoid 库...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值