vue2 npm run build 打包出来的dist 文件夹资源引用加载错误

最新推荐文章于 2024-09-13 14:55:21 发布
最新推荐文章于 2024-09-13 14:55:21 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/well2049/article/details/78599040
版权

我们在执行npm run build 打包出来的dist 文件夹，里面index.html页面的引用的路径是 /static/js/XXX ,页面是访问不到的引用资源的。。。。手动修改路径，把最前面的 / 去掉才可以访问，或者是在打包的config里面修改配置。

找到config文件夹下的index.js 打开i后看到这个
这里写图片描述

修改assetsPublicPath: ”，这样既可以啦。

well2049
关注
专栏目录
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
在npm run build执行后，会生成一个dist目录，这个目录包含了打包后的index.html文件和static文件夹。但是，Vue-cli的默认配置可能会导致在本地直接打开index.html时遇到问题。这是因为Vue-cli默认的配置是将静态...
解读 vue-cli 脚手架（二）：npm run build 的背后
Abner 的博客 (:
02-16 8625
解读 vue-cli 脚手架（二）：npm run build 的背后 接上一片文章: 解读 vue-cli 脚手架（一）：npm run dev的背后 如果没有看过我的上一篇文章，请先移步去看一下哈！ 时隔一年多，之前写的文章感觉大家还挺喜欢的，一直说要更新下一篇。但是一直没有机会，没时间，还有就是，感觉自己的技术，可能不足以支持我继续往下走。但是经过这个一年多的历练，感觉很多东西考虑的会更周...
vue2 webpack打包配置
最新发布
m0_46159356的博客
09-13 600
webpack打包后出现的问题以及解决方案
jeecg vue2 npm run build打包问题
fxm_fxm123456的博客
11-17 550
webpack版本太低。webpack版本太高。
vue配置开发，测试，生产环境api
weixin_34245749的博客
10-12 602
前言： 想实现通过不同的命令，打包调用不同环境的API，实现实现前端自动化部署。 前端自动化部署工程比较复杂，这里只介绍通过不同的命令，打包的时候调用不同环境的API，例如：npm run build 调用开发环境接口，打包开发环境npm run build:test 调用测试环境接口，打包测试环境npm run build:pr...
vue2 npm run build报错 These dependencies were not found:
红烧咸咸鱼
03-08 1717
vue2 npm run build报错 These dependencies were not found:
解决vue项目,npm run build后,报路径错的问题
10-14
总结，解决Vue项目`npm run build`后报路径错误的问题，主要涉及`webpack`配置中的`output.publicPath`、`config.index.js`中的`build.assetsPublicPath`以及正确处理CSS样式覆盖和资源引用。理解这些配置和技巧，能...
vue本地打开build后生成的dist文件夹index.html问题
12-08
npm run build 在dist 文件生成了 index 和 static 文件夹，为什么本地打开不了，给后端就能打开？ 如何才能像访问 npm run dev 的地址那样访问？ 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后，然后...
npm run dist 打包部署报错
a913396的博客
09-01 1852
1 运行命令报错 2 解决办法：copy build文件，部署到tomcat中，可以访问，该错误并不影响功能使用。
当执行npm run serve 时报错
weixin_50523140的博客
06-21 2149
问题： ERROR Failed to compile with 1 errors 上午8:25:17 This dependency was not found: * @/views/home in ./src/router/index.js To install it, you can run: npm install --save ...
Vue cli3真正可以解决npm run build后部分静态资源访问不到的方法
wanna__ac的博客
02-02 1429
我看了不少帖子，基本上都没用，解决方法无论是vue官网，还是vue官网的讨论帖，也都没有个沾边的 vue cli3官方文档 我直接下结论了：把history模式删掉，就可以访问到静态资源history模式和hash模式 vue cli3取消了build文件夹，改用了vue.config.js配置文件来进行配置，这个文件需要用户自己在根目录下创建，配置信息可参考vue.config.js配置 问题出在router/index.js的模式里，默认的模式是hash模式，将这句删除后，部分404的静态资源得以显示
vue打包静态资源后显示空白及static文件路径报错填坑
谭少.居然的博客
09-05 2万+
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。...
vue打包 assetsPublicPath改变，static下文件访问不到的问题
热门推荐
Helen
03-29 3万+
问题背景： 一、.smallTarget项目，使用vue官网脚手架，修改了/config/index.js文件，把默认打包后的文件夹名称改成了“smallTarget”，这时候npm run build 打包部署，就可以访问到以smallTarget为根目录的页面。（相当于只修改了文件夹的名称而已） index: path.resolve(__dirname, '../smallTarget/i...
vue项目打包之后部署访问静态资源全都404
天弃的博客
06-25 2210
问题 vue项目npm run build之后打包生成的dist文件夹，部署到服务器上访问静态资源全都404 解决 找到项目的vue.config.js文件 module.exports = { // 选项 publicPath: "./", outputDir: "dist", assetsDir: "assets", indexPath: "index.html", runtimeCo
vue项目build打包遇到的问题
weixin_43749669的博客
10-08 2841
1. npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因: 找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：’ / ’ 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：’ ./ ’ , 斜杠前加一个点，表示同一级。如图：
Flask+vue打包静态资源后显示空白及static文件路径报错
zucheng10的专栏
01-09 2481
使用flask+vue做前后端分离： 先做vue前端工程，参考菜鸟教程安装好vue并运行helloworld的页面； 然后打包前端代码： npm run build 会得到的前端文件如下 到此前端就准备好了。 接下来是准备flask,参考官网文档安装好flask,并启动一个最小应用, from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hell..
vue2打包
weixin_70024734的博客
09-14 1482
使用npm run build进行打包，或者通过查看项目中的package.json文件中的bulid的打包命令。build完成时可以在项目中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html。出现打包后页面空白现象。
element-ui2源码修改小问题
weixin_30505225的博客
11-02 140
最近element-ui升级到2了，添加了不少功能，可喜可贺，可喜可贺！ 然而，产品的需求依然那么刁钻，上传与删除图片还是要去改源码，为了同时用新的ele，决定在2中改源码 然而，遇到问题了。 　　一开始与之前博客中描述的一样，将github上的目录弄下来，修改对应的组件，然后执行npm run dist，如下图： 　　 　　没错，竟然报错了，报错的文件也很奇葩，是一个我根本没动过...
发布前端执行npm run build后没有dist文件夹
06-11
如果你执行 `npm run build` 后没有生成 `dist` 文件夹，可能有以下几种原因： 1. 没有在 `package.json` 文件中正确配置 `build` 命令。 在 `package.json` 文件中，`scripts` 字段下应该有一个名为 `build` 的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值