vue-cli静态资源处理

　　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中的

原文地址：https://www.cnblogs.com/wuyoucao/p/8552660.html

时间： 2024-11-08 07:44:40

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

vue引入assets和static静态资源问题

1.assets文件夹与static文件夹的区别 assets文件是src下的,所以最后运行时需要进行打包,一般用来存放自己用到的静态资源: static文件不需要打包就直接放在最终的文件中了,一般用来存放第三方静态资源. 引入静态资源方法:js中用import,css中用@import url(...) ,index.html中用link(script)标签引入. 利用vue-cli脚手架搭建的webpack对各种文件的编译一般是配置好的. 2.遇到的问题第一次使用vue构建工具做项目,业余

vue打包后出现静态资源|（图片，json数据）找不到路径

最近在学习Vue是如何编写项目的,在踩了许多坑后,终于要到了最后一步npm run build了,很开心的等待奇迹,然后打包后出现了找不到图片路径的问题. 解决办法:1.将图片或者json数据文件夹放到static的文件夹中,这样打包后webpack会自动打包 2.在build的文件夹下找到utils.js的文件,修改打包后静态资源的路径,添加 publicPath: '../../' 原文地址:https://www.cnblogs.com/klkitty/p/9099472.html

Weex/Vue项目中静态资源缓存处理.md

目录一.项目缓存问题二.浏览器本地缓存三.解决方案今年公司技术考察,考察了EMAS平台,从而接触了weex,并且为了进行POC测试,大胆采用weex进行新web项目试点.weex内置了vue框架,整体框架与vue一致,好在刚接触了vue一段时间,因此用起来还算顺手,碰到问题weex官方文档没有的,基本都可以参考vue的文档. 一.项目缓存问题第一次接触这类前后端完全分离的开发模式,一开始的确是一头雾水,一个多月时间,难点一点一点克服,目前进入项目测试阶段,经常碰到bug修复了,测试人员

Vue打包后访问静态资源路径问题

Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index.html在浏览器运行会发现图片路径出错啦!!! 解决方法: 1.先找到config下的index.js文件把最后的'/' 改为 './' 2.接着把图片地址改为这样就解决啦~~ 原文地址:https://www.cnblogs.com/wangx

【Vue CLI】从安装到构建项目再到目录结构的说明 𰅨

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.

@vue/cli 3 安装搭建及 webpack 配置

首先卸载旧版1 npm uninstall vue-cli -g //or 2 yarn global remove vue-cli 再次安装 1 npm install -g @vue/cli 2 //or 3 yarn global add @vue/cl 查看版本 vue --version //or vue -V 创建项目vue create my-project //项目名// Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作. //你必须通过

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

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

在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loaclhost:3000/news/newspage时静态资源路径前多了一个/news导致不能找到静态资源 app.js var express=require('express'); var app=express(); var path=require('path'); var http=requir

LAMP+NFS实现多个web服务器静态资源统一存储

需求分析: 1.前端需支持更大的访问量,单台Web服务器已无法满足需求了,则需扩容Web服务器: 2.虽然动态内容可交由后端的PHP服务器执行,但静态页面还需要Web服务器自己解析,那是否意味着多台Web服务器都需要在各自的系统中都存有一份静态页面数据呢? 其实这样也不是不可以,毕竟文件本地访问,速度还是有优势的,但这却涉及到多台Web服务器间内容的一致性问题,这种问题也不可避免: 那么如果能将静态页面集中存放,所有Web服务器都来集中地取文件,对于文件的一致性就有了保障,这个集中地就叫做"文件

使用vue cli开发项目中遇到的坑

一.部署文件使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可. 刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文文件即可,上传静态文件dist,将 controller指向index.html. 二.跨域问题实行前后端分离,使用vue i