解决vue项目,npm run build后,报路径错的问题


Posted in Javascript onAugust 13, 2020

在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相关配置,以及解决项目打包后,图片404,背景图片找不到,iview代码出问题的情况

1.首先找到config下的index.js文件 将build下的assetsPublicPath的斜杠换成./ 操作如下

只需要换build中的就可以 dev中的assetsPublicPath不用动 不然打包过后 npm run dev的时候直接出现can not Get

解决vue项目,npm run build后,报路径错的问题

2.因为打包后生成的是dist文件夹 文件夹中是static文件夹和index.html static文件夹中包含css fonts img js等文件夹 我们写好的css内容在css文件夹中的app.css中 要访问的图片内容在img下 所以要../../才可以访问到

解决vue项目,npm run build后,报路径错的问题

3.动态绑定src 应使用require方式引入

解决vue项目,npm run build后,报路径错的问题

4.使用iview,npm run build打包后,总会出现找不到woff字体等情况。在build文件夹下的webpack.prod.conf.js文件中 将extract改为false 就可以了

解决vue项目,npm run build后,报路径错的问题

5.使用iview时,有些样式我们要自己修改成我们想要的 直接复制出来 新建个style标签在里面修改 在dev下访问正常 npm run build下就出现问题 这个多数是嵌套问题

我当时遇到的是左侧菜单在开发时,一点问题都没有。打包后左侧菜单上面出来好大的空隙。本身调整好的悬停颜色还有字体背景等颜色都没了 解决方法: 当时项目用的是less 所以我在iview中找到我要重写的这些css他们的层级嵌套关系,逐级嵌套 就解决了这个问题 如下图 ivu-layout-sider是ivu-menu-submenu-title的父级 我当时忽略他们的层级关系 没有嵌套 直接平级的写在less中了 开发时虽然没出现问题 但是打包后问题百出 所以建议大家在开发时 要修改组件样式的时候 也要对应好层级关系

解决vue项目,npm run build后,报路径错的问题

以上这篇解决vue项目,npm run build后,报路径错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
JS的get和set使用示例
Feb 20 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 #Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 #Javascript
js实现幻灯片轮播图
Aug 14 #Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 #Javascript
修改Vue打包后的默认文件名操作
Aug 12 #Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 #Javascript
vue设置默认首页的操作
Aug 12 #Javascript
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
理解JavaScript原型链
2016/10/25 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
对Python3中的input函数详解
2018/04/22 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
产品质量承诺书
2014/03/27 职场文书
干部考核评语
2014/04/29 职场文书
外联部演讲稿
2014/05/24 职场文书
校庆团日活动总结
2014/08/28 职场文书
支部书记四风对照材料
2014/08/28 职场文书
校园运动会广播稿
2015/08/19 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python