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

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

　　方法如下：

第一步：

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

第二步：

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

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>wechat2</title>

    <script src="./static/js/flexible.js"></script>

  </head>

  <body>

    <div id="app">

      <router-view></router-view>

    </div>

  </body>

</html>

　　

第三步：

　　npm run dev

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

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

// serve pure static assets

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

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. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

  2. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  3. sql 插入

    今天处理了一个有关数据库表数据批量插入的问题.部分细节,自己之前没有遇到过.索性就整理下来,做个备忘录. 主要是将一个表的数据导入到另一张表中.这种插入方法,需注意两张表的对于字段的数据结构需要保持一 ...

  4. Binder学习笔记（六）—— binder服务端是如何组织addService数据的

    在checkService的调查中我们知道客户端向ServiceManager请求服务名,ServiceManager根据服务名遍历本地链表,找到匹配的handle返回给客户端.这个handle显然是 ...

  5. MySQL运维及开发规范

    一.基础规范 (1) 使用INNODB存储引擎 (2) 表字符集使用UTF8 (3) 所有表都需要添加注释 (4) 单表数据量建议控制在5000W以内 (5) 不在数据库中存储图.文件等大数据 (6) ...

  6. Nginx——1.基础知识

    Nginx——1.基础知识 作为高速.轻量.高性能等优点集于一身的服务器,Nginx在近些年迅速发展并不断扩大市场份额,甚至在最近其市场份额一举超过微软的IIS,跃身到第二位,仅次于Apache. 但 ...

  7. bzoj 1013: [JSOI2008]球形空间产生器sphere【高斯消元】

    n+1个坐标可以列出n个方程,以二维为例,设圆心为(x,y),给出三个点分别是(a1,b1),(a2,b2),(a3,b3) 因为圆上各点到圆心的距离相同,于是可以列出距离方程 \[ (a1-x)^2 ...

  8. js计算每个月的总天数

    js中相关日期的计算 var year = new Date().getFullYear(),//计算当前年份 month = new Date().getMonth()+1,//计算当前月份 dat ...

  9. 状压DP 【洛谷P3694】 邦邦的大合唱站队

    [洛谷P3694] 邦邦的大合唱站队 题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶 ...

  10. Python判断字符串编码以及编码的转换

    转自:http://www.cnblogs.com/zhanhg/p/4392089.html Python判断字符串编码以及编码的转换 判断字符串编码: 使用 chardet 可以很方便的实现字符串 ...