解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白。这时会有两类问题,都是路径问题。

1.一个是css,js,ico等文件加载不到,是目录里少了dist

打开页面时一片空白

解决办法:

前端精品教程:百度网盘下载

config/index.js文件的build->assetsPublicPath的默认值改为 ‘./‘

assetsPublicPath:资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用‘./‘

2.另一个就是单纯的在背景图使用相对路径导致加载不到图片

例如登录页面的背景图设置

我的目录结构是这样的,

前端精品教程:百度网盘下载

页的时候没发使用@/../static 只能使用../../../static

这个时候,打包过后的登陆页面引用图片路径错误,多了一个/static/css

解决办法:

前端精品教程:百度网盘下载

build/utils.js文件的ExtractTextPlugin.extract=>新增 publicPath:"../../"

publicPath:重写该加载器(loader) css 的 publicPath 的设置

原文地址:https://www.cnblogs.com/hudayang2008/p/9813317.html

时间: 2024-11-06 03:37:35

解决vue-cli webpack打包后加载资源的路径问题的相关文章

记一次webpack打包样式加载问题

今天是周六. 我过来加班了. 是因为一个属性问题. 俗话说一杯茶一包烟一个bug改一天 感觉这句话就是特意为我准备的(我加班的时候喝奶茶,抽烟,而且就一个bug.哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或) 言归正传,说下webpack打包问题,刚到新工作和大佬们一起做ts + vue + vant的项目.(我之前不写ts,其实差不多,就是命名语法等问题) 我们一起撸代码,一直是在本地run serve的本地是

webpack打包懒加载

lazyload https://webpack.js.org/guides/lazy-loading/ 懒加载 -- 按需加载. Lazy, or "on demand", loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading

vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打包时生成的map文件 在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件 2,vue-router路由懒加载 懒加载的实现方式有很多种,这里简单说三种实现方法 vue异步组件 import() webpack的require.e

使用live delegate on来解决js对后加载的html失效的问题

今天要写一个前端的东西.每多学一点知识,就可以少写几行代码.几十行代码.几个文件量的代码--这是真的.一直对前端的研究都是停留在遇到问题百度谷歌答案的做法.今天遇到这样一个问题:已经写好的js代码,对ajax加载的html失效了. 用好几组关键字都没有找到答案,最后这组帮我找到了解答的办法: javascript not work on ajax content 很幸运,我来到了:http://stackoverflow.com/questions/10161938/jquery-functio

升级MAC OS到10.13, 10.14系统后UNITY工程无法加载资源的解决办法

升级MAC OS到10.13, 10.14系统后,出现UNITY工程无法加载资源的情况: Unity项目中Asset目录显示为空! 解决办法一: 打开Launchpad中的磁盘工具 (也就是实用工具下的"磁盘工具") 新建一分区,名称大小任意,格式为MAC OS 扩展(日志式) 将unity工程移至新分区 OK,工程已经可以正常加载了 解决办法二: 1. 升级Unity版本 (如Unity5.6.6, Unity 2018.1 均可以)   2. 安装相应的补丁版Unity3D 参考链

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器)== == 介绍1:webpack-bundle-analyzer(可视化)== 将捆绑内容表示为方便的交互式可缩放树形图 如下效果图: 模块功能: 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大的大小 找到错误的模块 优化它! 最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的

Unity5 AssetBundle 打包以及加载

using UnityEngine; using System.Collections; using System.Collections.Generic; using UnityEditor; using System.IO; public class BuildAssetBundle : Editor { //需要打包的路径,根据项目具体需求自己定 private static string assetPath = "AllAssets"; //导出包路径 private stat

如何让后加载的元素被一开始就有的css样式渲染成功(强制提升css优先级)

今天在做搜索框中的提示语下拉的时候,提示框把搜索框的底部的border遮住,导致看起来不是很美观: 因为下方的提示框是用js后加载的它的样式也是随着js一起加载的,而这个js和它的css我们是不能改动的.如果直接一开始就使用css设置,卸载首页的css文件中,当focus输入框的时候,输入框的css是后加载进来以及渲染的,以至于我们看到的结果是一开始写在首页css文件中的样式被后面加载的样式覆盖了: 方案一:使用js定时器,当focus后延时一会儿大概255ms左右,再来渲染提示框的上边框颜色,

Unity3d 5.x AssetBundle打包与加载

1.AssetBundle打包 unity 5.x版本AssetBundle打包,只需要设置好AssetBundle的名称后,unity会自动将其打包,无需处理其他,唯独需要做的是设置好个AssetBundle的名称. 注意:AssetBunlde的名称只能设置小写字母,即使你写成大写也会被自动转置成大写字母,而且名称中支持"/",如:"AssetBundles/cube.unity3d",.unity3d的后缀是自己设置的,可以不设置 代码: using Unit