Vue cli3真正可以解决npm run build后部分静态资源访问不到的方法

最新推荐文章于 2023-12-08 06:45:00 发布
最新推荐文章于 2023-12-08 06:45:00 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： vue 文章标签： vue-cli3 vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44004068/article/details/113573826
版权

我看了不少帖子，基本上都没用，解决方法无论是vue官网，还是vue官网的讨论帖，也都没有个沾边的
vue cli3官方文档

我直接下结论了：把history模式删掉，就可以访问到静态资源history模式和hash模式

vue cli3取消了build文件夹，改用了vue.config.js配置文件来进行配置，这个文件需要用户自己在根目录下创建，配置信息可参考vue.config.js配置
在这里插入图片描述
问题出在router/index.js的模式里，vue显示地将模式配置为history模式，将这句删除后，便默认为hash模式，此时部分404的静态资源得以显示，原因不详
在这里插入图片描述

没有删除前
在这里插入图片描述
删除后
在这里插入图片描述
解决方案先放在这里，等一手高人讲一下为啥是这样，总算是给打包好了

宋辰轩
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目,npm run build后,报路径错的问题
11-20
在build目录下的webpack.prod.conf.js里面： output: { path: config.build.assetsRoot, publicPath: "/dist/", // 添加这行代码，可解决该问题或者publicPath: "./",也可解决 filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, 补充知识：vue项目打包后，npm run build相关配置，以及解决
vue填坑之webpack run build 静态资源找不到的解决方法
12-09
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常，今天放到服务器上跑，结果RD说找不到打包后的静态资源，浏览器控制台错误代码404 问了RD，因为服务器上线方式的调整，不会指定具体项目路径因此，https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css 这个文件找不到，看看我们正常打包好的目录： 正确的访问路径是：https://bigdata.yiche.com/deploy/static/css/app.149f36018149fcbe537f02cafd
基于vue-cli npm run build之后vendor.js文件过大的解决方法
01-21
问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。 解决方案 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中。 1.在项目根目录index.html使用cdn节点导入 <!-- 先引入 Vue --> <!--开发环境--> [removed][removed] <!--
【Vue】npm run build部署上线后，static里部分图片路径不对，无法正常显示
六碗铁biu_ 的博客
11-14 976
现象 v-bind:src="../../../static/logo.png" 使用了以上方式绑定了静态资源，npm run build部署，路径不对，404 但是工程中src="../../../static/logo.png"这种非绑定的可以正常访问。 原因： 找了很多网上的例子，配置域名，config下的index.js文件 将build下的assetsPublicPath的斜杠...
Vue项目启动后用局域网不能访问
最新发布
分享自己的经验、IT技术，愿在博客中遇见更好的自己
12-08 1448
今天来解决一个问题：基于Vite构建的Vue项目在启动后只能通过localhost这种形式访问，但 如果把localhost换成本主机的局域网ip地址之后页面无法访问了。
vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置
weixin_39845185的博客
12-18 1万+
vue.config.js配置如下：   const path = require('path'); const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda） const CompressionPlugin = ...
vue3调用静态资源
weixin_67471616的博客
04-20 614
考虑到vue3也兼容vue2语法，所以踩坑花了大量时间去解决这个问题，尝试了很多办法，最后终于试出来了，vue2和vue3在调用静态资源上是有一点差别的，vue2是通过webpack处理的static，vue3没有通过webpack，所以在导的时候就不能通过static去导，而是public，在调用的时候不要写文件名，直接写后面部分就能正常引入了。大概是资源没调用上，看了其他文章寻找解决办法，说的和webpack版本有关，跟着操作了下，所以这个问题很简单啦，不过第一次遇到花了太多时间，记录一下，避免踩坑！
vue项目 npm run build 打包静态项目问题，一步到位的操作
Jacy_Lee_LDF的博客
08-14 2188
这次是第一次做vue项目，什么都不懂，过程中也遇到很多问题，每一次解决了就习惯性的写篇文章记录下来，以免下次再遇到，这次项目终于写完了，要打包上线，发现直接npm run build 打包之后，index.html 页面打开空白，检查发现引用的文件都报错了，百度方法，不报错了，但是index依然空白，还有项目打包时报错的问题，经过几十个标签页的学习，我觉得干脆改打包之前该修改的内容已经该添加的内容都操作一遍好了，省心！以下是具体操作： 1.首先修改 config/index.js ： productio.
vue项目部署服务器，static文件夹里文件路径不对报404
weixin_42981487的博客
10-12 4660
场景：vue项目本地运行正常，npm run build之后，将dist文件上传至服务器之后，在nginx配置完成情况下，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白。 原因：路径不对，找不到对应的static文件夹 方案： 有两种修改方式，一种是修改为相对路径，一种是修改为绝对路径。 以相对路径为例 解决方案： 将 ’ / ’ 改成 ’ ./ ’ 然后重新打包部署，访问就可以了。 参考于：vue 项目放在服务器上 静态资源路径不对报404错误_yongy.
vue项目npm run build扔到服务器的文件夹后找不到dist的static里的文件的问题
weixin_44910729的博客
09-30 2482
1、 在项目的config文件夹找到index.js，改 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',
vue打包 assetsPublicPath改变，static下文件访问不到的问题
热门推荐
Helen
03-29 3万+
问题背景： 一、.smallTarget项目，使用vue官网脚手架，修改了/config/index.js文件，把默认打包后的文件夹名称改成了“smallTarget”，这时候npm run build 打包部署，就可以访问到以smallTarget为根目录的页面。（相当于只修改了文件夹的名称而已） index: path.resolve(__dirname, '../smallTarget/i...
vue打包静态资源后显示空白及static文件路径报错填坑
谭少.居然的博客
09-05 2万+
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。...
vue系列---项目打包找不到图片路径
yyjourney的博客
01-22 3595
在测试环节发现有图片找不到，发现是图片路径没有写对。 报错如下： 原代码： "/src/assets/img/arrow.png" alt="" class="col-step"> 这种引入图片的方式是错误的，虽然在页面展示的时候会出现，但是在打包后就会出现编译问题，src是无法编译的。 正确的引入格式： 第一种： img src="../../assets/i
npm run build 的时候 一些静态文件没有打包
qq_30346433的博客
06-18 558
将静态资源放到 public 文件夹下面。
vue 3.0 静态资源访问不到 解决办法
weixin_44647098的博客
04-18 2265
二话不说 直接上代码 module.exports = { // 基本路径 publicPath:"./", // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径 outputDir:“dist”, //打包时生成的生产环境构建文件的目录 assetsDir: ‘public’, // 放置生成的静态资源 (js、css、img、fonts) 的 (相...
vue项目build打包遇到的问题
weixin_43749669的博客
10-08 2481
1. npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因: 找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：’ / ’ 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：’ ./ ’ , 斜杠前加一个点，表示同一级。如图：
vue-cli-service build与npm run build区别
08-19
引用<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-cli3打包时vue-cli-service build怎么分不同环境（npm run build:stage和npm run build:prod）](https://blog.csdn.net/weixin_52428855/article/details/124631881)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [解决Vue-cli npm run build生产环境打包,本地不能打开的问题](https://download.csdn.net/download/weixin_38710566/13665391)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值