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. codeforces Summer Earnings(bieset)

    Summer Earnings time limit per test 9 seconds memory limit per test 256 megabytes input standard inp ...

  2. sqlmap 基本使用步骤（一）

    列出数据据信息:python sqlmap.py -u "http://ctf5.shiyanbar.com/web/index_3.php?id=1" --dbs 列出当前数据库 ...

  3. RestTemplate 发送post请求

    springboot使用restTemplate post提交值 restTemplate post值 post提交有 FormData和Payload 两种形式: 第一种是formdata形式,在h ...

  4. Check the port occupy on Mac OSX

    Check the port occupy on Mac OSX lsof -i :7070 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME si ...

  5. CF889 E Mod Mod Mod——DP

    题目:http://codeforces.com/contest/889/problem/E 这题真好玩. 官方题解说得很好. 想到相邻 a[ i ] 之间的段可能可以一起维护,但是不太会. 原来是表 ...

  6. 实现word在线预览 有php的写法 也有插件似

    <?php //header("Content-type:text/html;charset=utf-8"); //word转html 展示 $lj=$_GET['file' ...

  7. LintCode之左填充

    题目描述: 分析:由样例可知,第二个参数表示要返回的字符串的最小长度,所以当给定字符串的长度小于规定字符串最小长度时就在左边填充空格,另外还有一个重载方法leftpad的第三个参数指定左边填充的字符. ...

  8. php面试专题---12、JavaScript和jQuery基础考点

    php面试专题---12.JavaScript和jQuery基础考点 一.总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...

  9. 「PHP开发APP接口实战009」日常安全防范之防SQL入和XSS攻击

    防SQL注入和XSS攻击通用过滤 首先在 /app/library/ 目录下创建 Security.php 文件并添加以下代码: <?php /** * * 防SQL注入和XSS攻击通用过滤 * ...

  10. Cisco Packet Tracer基本操作

    IOS主要模式模式 描述 提示符用户执行模式 路由器受限检查,远程访问 Router>特权执行模式 路由器的详细检查:调试和测试,文件处理,远程访问 Router#全局配置模式 全局配置命令 R ...