曾经,我非常羡慕那些人见人爱的人,我也想要变成那样,可是后来我才明白人见人爱也是需要天赋的,后来我开始默默努力,我想,就算我不能让每个人都喜欢我,至少因为我做的努力能得到别人的尊重。

vue-cli构建项目在index.html中使用静态文件

  在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文件放在这里,否则无法获取。

 

posted @ 2017-05-18 01:43  Wayne-Zhu  阅读(3913)  评论(0编辑  收藏  举报

一分耕耘,一分收获。