vue-cli是利用webpack进行打包部署,其中静态资源的路径问题是一个比较麻烦的部分。

  项目中共有两个存放静态文件的地方。

  • /static 根目录下的static文件夹
  • assets src目录下资源文件夹

  /static 目录不会被webpack处理,build后复制到disk目录下,所以.vue中使用/static绝对目录引用的不会被webpack处理。

  在组件中使用assets中的静态文件,通常有两种形式的引用:

    1.img标签引用  <img src='./assets/logo.png'/>

    2.background背景图片引用 background:url(./assets/logo.png');

  webpack在处理.vue时会搜索这两类引用,处理方式稍有不同。

  首先判断是否是绝对路径开头,如果是两种都不作处理,如果为相对路径先搜索该路径是否能在src中找到,如找到并且文件较小将被转为base64格式,如较大将重命名文件并将文件复制到static/img目录下(./assets/pic.png变为/static/img/pic.3472138.jpg);  如果找不到,img将不做处理原样输出,但是background背景图会报错。

  

  如果想要打包输出的内容可在相对目录中访问可修改config/index.js中的

  

vue-cli静态资源处理的更多相关文章

  1. vue cli 静态资源导入 路径

    1.public文件夹 使用绝对路径引入. 2.assets文件夹 使用相对路径引入. https://cli.vuejs.org/zh/guide/html-and-static-assets.ht ...

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

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

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

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

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

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

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

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

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

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

  7. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  8. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  9. Vue中的~(静态资源处理)

    Webpacked 资源 首先要理解webpack是怎样处理静态资源的. 在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资 ...

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

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

随机推荐

  1. C# ABP 允许跨域请求

    备注:无论有没有安装 apb zero模块,都可以使用本文的跨域 首先配置Web Api: 1. 在Web API项目下,安装包 Install-Package Microsoft.AspNet.We ...

  2. 配置Windows 防火墙,允许SQL Server的远程连接

    在运行SQL Server的服务器上,我们要找到哪些是SQL Server正在侦听的端口,并将其添加到Windows防火墙的入站例外. 首先,我们需要添加 SQL Server 服务侦听 Window ...

  3. Stack源码解析

    我们从一个DEMO作为入口,了解Java的Stack的源码,代码如: Stack<String> stack = new Stack<>(); stack.push(" ...

  4. 月之数(hdu2502)数学题

    月之数 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  5. es7新增的2个特性

  6. PHP解决中文乱码

    在php中,中文乱码非常头疼,很麻烦,所以根据在编程的经验,总结以下方法(以utf_8为例), 1.php中在头部header设置编码方式 header("Content-type:text ...

  7. win7下解决vs2015新建项目,提示“未将对象引用设置到引用实例“的问题

    问题描述: 打开vs2015新建c++项目时,出现有如下内容的对话框“未将对象引用设置到引用实例”的提示 解决方法: 1.  温馨提示:千万不要一冲动,就去卸载vs2015!! win7下安装vs20 ...

  8. OSGI企业应用开发(八)整合Spring和Mybatis框架(一)

    到目前为止,我们已经学习了如何使用Blueprint將Spring框架整合到OSGI应用中,并学习了Blueprint&Gemini Blueprint的一些使用细节.本篇文章开始,我们將My ...

  9. SD从零开始01-02

    SD从零开始1 SD中的组织结构 销售相关的组织结构: 销售组织Sales organization 分销渠道Distribution channel 产品组Division 销售区域Sales ar ...

  10. Java java jdk在Linux下安装与环境变量的配置

    java jdk在Linux下安装与环境变量的配置 by:授客 QQ:1033553122 linux环境:CentOS-6.0-x86_64-bin-DVD1.iso [root@localhost ...