Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。

我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？

我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现

图片路径出错啦！！！

解决方法：

1.先找到config下的index.js文件

把最后的'/' 改为 './'

2.接着把图片地址改为

这样就解决啦~~

Vue打包后访问静态资源路径问题的更多相关文章

  1. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

  2. vue打包后.woff字体文件路径问题处理

    在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决

  3. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  4. vue打包后运行在本地/非服务器端环境的访问路径

    vue打包前的配置: 项目目录下--> config文件夹---> index.js: build:  { assetsPublickPath:  './',   // 设置成相对路径   ...

  5. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  6. vue+webpack静态资源路径引用

    处理静态资产 你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.v ...

  7. vue打包后空白页问题全记录 （background路径，css js404，jsonp等）；

    总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...

  8. Spring boot 默认静态资源路径与手动配置访问路径的方法

    这篇文章主要介绍了Spring boot 默认静态资源路径与手动配置访问路径的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下   在application.propertis中配置 ##端口号 ...

  9. SpringMVC访问静态资源的三种方式(转)

    本文转自:http://www.iigrowing.cn/springmvc_fang_wen_jing_tai_zi_yuan_de_san_zhong_fang_shi.html 如何你的Disp ...

随机推荐

  1. Jmeter接口测试---加解密

    1.加解密的jar包放到jmeter的lib/ext目录下. 项目打jar包参考https://www.cnblogs.com/fulucky/p/9436229.html 2.在测试计划---> ...

  2. 有关shell中冒号的特殊用法

    有关shell中冒号的特殊用法,供朋友们参考. : ${VAR:=DEFAULT} 当变量VAR没有声明或者为NULL时,将VAR设置为默认值DEFAULT.如果不在前面加上:命令,那么就会把${VA ...

  3. Thinkphp 请求和响应

    一. Request对象获取方法 1. request() 助手函数获取 2. think\Request 类获取 3.利用框架注入Request对象  Request方法时单利方法 在think框架 ...

  4. crt无法修改背景

    当会话选项 里面的终端类型选择为Linux时,是无法修改外观颜色方案的.可以选择为vt100,就可以修改颜色了

  5. MySQL数据库的自动备份与数据库被破坏后的恢复（2）

    测试自动备份正常运转与否(备份恢复的方法) 这里,以通过实际操作的过程来介绍问题出现后的恢复方法. [1] 当数据库被删除后的恢复方法 首先建立一个测试用的数据库. [root@CentOS ~]# ...

  6. GEI步态能量图生成

    步态能量图生成主要有两步,主要为: 在原始轮廓图上对人的轮廓进行裁剪,在下面制作步态能量图图片叠加以什么为中心位置也是一个问题.一般有两种方式,一种是中心位置为人体宽的一半.另一种是以头顶为中心位置. ...

  7. 面向对象编程思想（OOP）（转发）

    本文我将从面向对象编程思想是如何解决软件开发中各种疑难问题的角度,来讲述我们面向对象编程思想的理解,梳理面向对象四大基本特性.七大设计原则和23种设计模式之间的关系. 软件开发中疑难问题: 软件复杂庞 ...

  8. Matplotlib系列(四)--plt.bar与plt.barh条形图

    (一)竖条条形图 参数说明 参数 说明 类型 x x坐标 int,float height 条形的高度 int,float width 线条的宽度 0~1,默认是0.8 botton 条形的起始位置 ...

  9. jajaj

    Docs » 第二章:字符串和文本 » 2.2 字符串开头或结尾匹配 Edit on GitHub 2.2 字符串开头或结尾匹配¶ 问题¶ 你需要通过指定的文本模式去检查字符串的开头或者结尾,比如文件 ...

  10. p5339 [TJOI2019]唱、跳、rap和篮球

    分析  代码 #include<bits/stdc++.h> using namespace std; #define int long long ; ; ],inv[],G,cc[][] ...