在vue-cli构建的项目中，且使用在移动端，我们希望每一个页面加载时都可以使用flexible.js来适配手机。 那么这个flexible.js被import到每一个组件中就不合适了。

　　好的方法是直接放在index.html的head中。

　　方法如下：

第一步：

　　在src同一个目录下建立static文件夹（vue-cli自身就有），然后在static中建立一个js文件夹存放静态js文件，即把flexible.js放进去。

第二步：

　　直接在html中引用该文件，如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>wechat2</title>
  6.     <script src="./static/js/flexible.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <router-view></router-view>
  11.     </div>
  12.   </body>
  13. </html>

　　

第三步：

　　npm run dev

　　这样，我们就可以引入flexible.js了，经过压缩后的flexible.js只有惊人的1kb！！！

注意：如果将flexible.js放在其他目录下是不起作用的。因为我们在dev-server.js中可以看到下面的代码：

  1. // serve pure static assets
  2. var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
  3. app.use(staticPath, express.static('./static'))

　即使用静态文件功能，并且使用的path为path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)。 而config配置如下：

assetsSubDirectory: 'static',
assetsPublicPath: '/',

　　即在根目录的static下，所以必须将第三方的js文件放在这里，否则无法获取。

vue-cli构建项目在index.html中使用静态文件的更多相关文章

  1. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

  2. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  3. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  4. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  5. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  6. 擦他丫的，今天在Django项目中引用静态文件jQuery.js 就是引入报错，终于找到原因了！

    擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...

  7. （5）ASP.NET Core 中的静态文件

    1.前言 当我们创建Core项目的时候,Web根目录下会有个wwwroot文件目录,wwwroot文件目录里面默认有HTML.CSS.IMG.JavaScript等文件,而这些文件都是Core提供给客 ...

  8. 【jsp】怎么在jsp文件中引入静态文件(.js .css)

    如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...

  9. Django中对静态文件的支持（转）

    英文原文:[http://agiliq.com/blog/2013/03/serving-static-files-in-django/] 译文:[http://segmentfault.com/a/ ...

随机推荐

  1. 《Spring实战》-2

    装配Bean 1.装配wiring,即创建应用对象之间的协作关系的行为,者也是依赖注入的本质. 2.创建Spring配置 从Sring3.0开始,Spring容器提供了两种配置Bean的方式: XML ...

  2. 探讨js闭包

    背景:爱就要大胆说出来,对于编程我只想说,喜欢就大胆写出来.喜欢却不行动那就意味着失败.所以,对于在研究编程的猿们,我对同伴们说,大胆的学,大胆的写.呵呵,说这些其实无非是给我自己点动力,写下去的勇气 ...

  3. 【Arcgis for android】保存地图截图到sd卡

    关键词:arcgis for android ,截图,bitmap,sd卡 参考文章:http://blog.csdn.net/wozaifeiyang0/article/details/767972 ...

  4. xml知识点

    XML 被设计用来传输和存储数据. HTML 被设计用来显示数据.应该掌握的基础知识:在您继续学习之前,需要对以下知识有基本的了解: HTML / XHTML JavaScript 如果您希望首先学习 ...

  5. HeadFirst设计模式中的笔记

    1.『策略模式』 定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. OO基础:抽象 封装 多态 继承 OO原则:封装变化 多用组合,小用继承   针对接口编 ...

  6. Python之图片缩放功能实现

    这几天由于有项目在做,自己的学习部分然后没有很充足的时间,但是这些零碎的时间也是很宝贵的,所以还是继续学我的python,我很喜欢这个语言,因为简洁,开发环境简单,更多的事,功能灰常的强大,所以好多有 ...

  7. iOS10 新特性-新功能，以及ReplayKit库

    iOS的10.0 本文总结了iOS的10,运行于目前推出iOS设备推出的主要开发者相关的功能. iOS版10引入了新的方法来增加您的应用程序通过帮助系统参与在适当的时候建议你的应用程序给用户.如果你在 ...

  8. 平衡树学习笔记（2）-------Treap

    Treap 上一篇:平衡树学习笔记(1)-------简介 Treap是一个玄学的平衡树 为什么说它玄学呢? 还记得上一节说过每个平衡树都有自己的平衡方式吗? 没错,它平衡的方式是......rand ...

  9. 【NOIP 2009】最优贸易

    描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通 ...

  10. win10系统重装

    问题描述 win10开启热点网卡坏了,没折腾好.然后把系统网卡折腾坏了. 所以重装了系统,写下我的环境从零到晚上的过程 1安装系统 用WePE安装win10,镜像采用:cn_windows_10_en ...