解决vue项目,npm run build后,报路径错的问题
在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
2.因为打包后生成的是dist文件夹 文件夹中是static文件夹和index.html static文件夹中包含css fonts img js等文件夹 我们写好的css内容在css文件夹中的app.css中 要访问的图片内容在img下 所以要../../才可以访问到
3.动态绑定src 应使用require方式引入
4.使用iview，npm run build打包后，总会出现找不到woff字体等情况。在build文件夹下的webpack.prod.conf.js文件中 将extract改为false 就可以了
5.使用iview时,有些样式我们要自己修改成我们想要的 直接复制出来 新建个style标签在里面修改 在dev下访问正常 npm run build下就出现问题 这个多数是嵌套问题
我当时遇到的是左侧菜单在开发时，一点问题都没有。打包后左侧菜单上面出来好大的空隙。本身调整好的悬停颜色还有字体背景等颜色都没了 解决方法: 当时项目用的是less 所以我在iview中找到我要重写的这些css他们的层级嵌套关系,逐级嵌套 就解决了这个问题 如下图 ivu-layout-sider是ivu-menu-submenu-title的父级 我当时忽略他们的层级关系 没有嵌套 直接平级的写在less中了 开发时虽然没出现问题 但是打包后问题百出 所以建议大家在开发时 要修改组件样式的时候 也要对应好层级关系
以上这篇解决vue项目,npm run build后,报路径错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3利用v-model实现父子组件之间数据同步的代码详解
在Vue 3中,v-model这一指令也得到了升级,使得父子组件之间的数据同步变得更加容易和灵活,本文将探讨一下Vue 3中如何利用v-model来实现父子组件之间的数据同步,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了vue2.0开发入门笔记之.vue文件的生成和使用 ,非常具有实用价值，需要的朋友可以参考下2017-09-09
Vue框架提供了一些便捷的数组变异方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的数组变异方法可以自动触发DOM更新，本文就详细带大家了解一下Vue.js数组的变异方法2023-06-06
这篇文章主要给大家介绍了关于vue3中ace-editor简单使用的相关资料,ace-editor是一种代码编辑器,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
elementUI select组件value值注意事项详解
这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Vue使用ElementUI动态修改table单元格背景颜色或文本颜色
本文主要介绍了Vue使用ElementUI动态修改table单元格背景颜色或文本颜色，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了vue组件watch属性实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue项目打包部署流程,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
vue.js的一大功能便是实现数据的双向绑定。这篇文章主要介绍了vue自定v-model实现 表单数据双向绑定的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论