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. （转）nginx+redis实现接入层高性能缓存技术

    转自:https://blog.csdn.net/phil_code/article/details/79154271 1. OpenRestyOpenResty是一个基于 Nginx与 Lua的高性 ...

  2. VS TODO注释快捷键

    快速按出任务列表 todo 注释 Ctrl 键+ \| 键+ T键

  3. java基础复习（四）

    ---恢复内容开始--- 一.for循环的掌握  语法格式: for( 初始化语句A   ;  条件判断B  ;  循环后功能语句C){ //循环体D } for的执行流程:   整个for循环结构中 ...

  4. maven 自动编译脚本

    在maven工程根目录创建windows批处理脚本文件,例如tool.bat,内容如下 @echo off color 1f :menu echo -------------------------- ...

  5. man mkfs

    ---恢复内容开始--- MKFS(8)                                                                MKFS(8) NAME/名称  ...

  6. Python操作cx_Oracle笔记

    参考文章: http://cx-oracle.readthedocs.io/en/latest/cursor.html # 创建数据库连接 ordb = Oracle.connect("{0 ...

  7. postman接口自动化测试之如何使用）

    postman 是一款强大网页调试工具的客户端,postman为用户提供强大的 Web API & HTTP 请求调试功能.postman能够发送任何类型的HTTP 请求 (GET, HEAD ...

  8. 27 August

    高精度 struct bigint{ int a[1000],an; bigint operator = (int b){ an=0; while (b){a[an++]=b%10;b/=10;} r ...

  9. 为 PhpStorm 配置 Xdebug 来调试代码

    当项目越来越复杂,排错就越发困难. 你以为代码是这么运行的,但就是有未想到的功能导致流程变得不可捉摸. 此时我们需要调试啊调试... PhpStorm 是一款优秀的 PHP IDE,排除其 Java ...

  10. loj6259「CodePlus 2017 12 月赛」白金元首与独舞

    分析 我们将没连的点连向周围四个点 其余的按照给定的方向连 我们将所有连出去的位置统一连到0点上 再以0作为树根 于是就将问题转化为了有向图内向树计数 代码 #include<iostream& ...