解决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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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/01/06 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
python格式化字符串实例总结
2014/09/28 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
办理生育手续介绍信
2014/01/14 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
企业标语大全
2014/07/01 职场文书
旅游项目合作意向书
2015/05/08 职场文书
党纪处分决定书
2015/06/24 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
MySql分区类型及创建分区的方法
2022/04/13 MySQL
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js