vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个

1、js,css路径不对

解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’

2、css中引用的图片资源找不到

我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的

.login{height:100%;background: url("../assets/login_bg.jpg") no-repeat; background-size: cover;color: white;}

“src/assets/”文件夹下有这张图片,打包后路径发生变化这个图片就找不到了,stackflow上有一个解决办法,很简单

打开“build/utils.js”,增加一行代码即可

原文地址:http://www.ftc20.com/wordpress/2017/11/vue-static-resource-route-question/

vue打包静态资源路径不正确的解决办法【转】的更多相关文章

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

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

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

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

  3. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  4. vue打包静态资源后显示空白及static文件路径报错

    1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...

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

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

  6. vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行  cnpm run build  开始 ...

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

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

  8. springboot之静态资源路径配置

    静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classp ...

  9. 13.1Springboot 之 静态资源路径配置

    Spring 静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/ ...

随机推荐

  1. 使用nginx搭建高可用,高并发的wcf集群

    很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk对C# 不大友好,实现起来相对来说比较麻烦,实际情况下,如果 你的负载机制粒度很粗糙的话,优先使用nginx就 ...

  2. TypeScript|Angular踩坑笔记

    今天按照Angular官网玩了下demo程序,踩了个小坑,记录下. TypeScript可以将变量申明为自定义类型,同时也不对该类型进行检查(不像C#,如果没有这个类型会报错) 比如下面这样: 如果我 ...

  3. (转载)IQueryable和IEnumerable

    第一篇:https://www.cnblogs.com/zgqys1980/p/4047315.html: 第二篇:https://www.cnblogs.com/shenbing/p/5394228 ...

  4. Linux高级运维 第三章 Linux基本命令操作

    3.1  Linux终端介绍.Shell提示符.Bash基本语法 3.1.1  登录LINUX终端 两种终端仿真器:1.GNOME桌面的GHOME Terminal : 2.KDE桌面的Konsole ...

  5. 80后程序员降薪6K,预感中年危机来袭,准备跳槽却碰壁

    一提及程序员,很多人想到的都是“工资高”“技术好”诸如此类的,可见程序员是个非常赚钱的职业,所以每年都会有很多毕业生来选择这个行业. 但是社会是公平的,不要只看程序员表面上的光鲜亮丽,其背后也有很多的 ...

  6. Netty中的Channel之数据冲刷与线程安全(writeAndFlush)

    本文首发于本博客,如需转载,请申明出处. GitHub项目地址 InChat 一个轻量级.高效率的支持多端(应用与硬件Iot)的异步网络应用通讯框架 前言 本文预设读者已经了解了一定的Netty基础知 ...

  7. C++系列总结——继承

    前言 前面讲了封装,但封装只是隐藏了类内部实现.如果使用多态隐藏类本身的话,只有封装是不够的,还需要继承. 继承 通过封装.我们把一些相关的函数和变量包裹在了一起,这些函数和变量就叫做类的成员函数和成 ...

  8. 深入Node之初识

    0前言 陆续的用Node已经一年多了,已经用node写了几个的项目,也该是总结node学习的过程了 1.Node是啥? Node.js是一使用JavaScript作为开发语言,运行在服务器端的Web服 ...

  9. 关于Knowledge Transfer的一点想法

    维基百科中对于Knowledge Transfer(知识转移)的定义是: 知识转移是指分享或传播知识并为解决问题提供投入.在组织理论中,知识转移是将知识从组织的一个部分转移到另一个部分的实践问题. 与 ...

  10. 用golang写了个统计各单位报送的信息数量的微服务

    代码很乱,bug很多,将就着看吧.参考了很多网上代码,只能说声感谢了. //cjl.ZongHeInfo.1.0 //目的:对各部门报上来的信息数量进行排名 //思路:预计一年信息量不超过100M,全 ...