解决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写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
使用Vue实现简单计算器
Feb 25 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 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新手上路(九)
2006/10/09 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP7匿名类用法分析
2016/09/26 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript每日必学之循环
2016/02/19 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python内存映射文件读写方式
2020/04/24 Python
python如何查看安装了的模块
2020/06/23 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
ORACLE第二个十问
2013/12/14 面试题
品质口号大全
2014/06/17 职场文书
人大调研汇报材料
2014/08/14 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
护士岗位竞聘书
2015/09/15 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android