Vue项目中的静态资源引入

  • assets和static
    • assets
    • 静态资源访问static

assets和static

assets

assets在src文件夹下面,src里面的文件是参与打包的,所以一般项目中的资源会放在assets文件夹下,使用相对路径即可访问

静态资源访问static

项目中有时候需要引入静态资源,比如无需修改的js文件等,且无法npm获取,一般作为缓存的静态资源,会放在static文件夹下(放在其他文件夹下面会报错,直接报静态资源内部的错误,排查了一天。。。),在index.html中引入

<script src="<%= BASE_URL + VUE_APP_ASSETS + '/' %>EchartsLayer.js"></script>

VUE_APP_ASSETS是自己在.env文件中设置的,BASE_URL是项目自带的,我这里是Public,可以自己设置。如果不用上述方法也可以直接引入,但是静态资源不可以使用import和require的方式引入。

Vue项目中的静态资源引入相关推荐

  1. Spring-Boot:写出来的网站访问不到静态资源?怎样通过url访问SpringBoot项目中的静态资源?localhost:8989/favicon.ico访问不了工程中的图标资源?

    Spring-Boot:Spring-Boot写出来的网站访问不到静态资源?怎样通过url访问SpringBoot项目中的静态资源?localhost:8989/favicon.ico访问不了工程中的 ...

  2. vue项目配置public静态资源路径访问

    1.简介 一般的vue项目都有一个初始index.html,而其他js.css都是这个html引入的,默认情况下使用绝对路径引入,如/js/app.js 这样就有一个问题,静态资源经常要部署在不同的上 ...

  3. Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题

    问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片. 解决方案: 第一步:修改build文件夹下utils.js,在以下位置加入 i ...

  4. Tinymce富文本编辑器在vue项目中的使用;引入第三方插件和上传视频、图片等

    先放张效果图 第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...

  5. 新窗口打开vue项目中的静态pdf文件,并做权限控制

    问题:公司系统做安全测试,其中一个问题是没有登录的情况下,直接访问 "项目地址/operate.pdf "此地址,会展示pdf文件. 描述:点击系统内的一个按钮会打开新窗口展示系统 ...

  6. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. 使用H5Stream实现rtsp视频流播放,在Vue项目中 (无插件、可多视频源播放、亲测可用)

    本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件 运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本 等可 ...

  8. 【vue】如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  9. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

最新文章

  1. C 语言编程 — 指令行参数
  2. Visual C++ 确定要使用的链接方法
  3. ArcEngine中IFeatureClass.Search(filter, Recycling)方法中Recycling参数的理解
  4. docker安装ActiveMQ
  5. VTK读取序列化图像
  6. how is central js retrieved from ABAP repository
  7. SQL 2005: @@identity 的妙用
  8. vb添加GIF动态图片
  9. java spi与api,SPI和API之间的区别?
  10. android wifi信号强度命令,Android显示wifi信号强度以及周边信号的代码
  11. java考试时间,Java认证考试知识点:Java时间类的函数
  12. 短信业务 ——HTTP接口文档
  13. 利用超级绘图王简化建筑识图课程的教学
  14. 智慧酒店雷达传感方案,人体存在感应技术应用,雷达探测模块
  15. logback日志配置教程
  16. 不讲武德的Python反爬神器『fake_useragent』
  17. ECN Trade:全球经济疲软,美国国债成新宠
  18. MATLAB中被误解的赋值:a([2,2])和a(2,2)
  19. vulnhub靶场之HA: Joker
  20. 计算机英语二国家线,2017考研英语二国家线

热门文章

  1. ESXi/ESX 链路聚合
  2. 前端工程师需要学习ps 吗_前端人员一定要掌握的PS技巧
  3. Android App内截屏监控及涂鸦功能实现
  4. 从零开始搭建博客Hexo-Node-Git搭建博客
  5. 七日杀服务器无限刷空投,七日杀空投作弊代码 | 手游网游页游攻略大全
  6. 适量饮酒,对身体好?医生说:恰恰相反!
  7. 基于openstack安装部署私有云详细图文教程
  8. css 选父元素,CSS中模拟父元素选择器
  9. 【VHDL】半减器 and 或门 组成 全减器
  10. python 利用脚本命令压缩加密文件并删除源文件