解决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 String 的扩展方法集合
Jun 01 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
js下载文件并修改文件名
May 08 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
php导入模块文件分享
2015/03/17 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
JavaScript实现三级级联特效
2017/11/05 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python实现微信小程序自动回复
2018/09/10 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
《落花生》教学反思
2014/02/25 职场文书
校园活动宣传方案
2014/03/28 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
居委会工作总结2015
2015/05/18 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python