zoukankan      html  css  js  c++  java
  • 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文件放在这里,否则无法获取。

     

  • 相关阅读:
    【皇甫】☀ 亮眼的颜色
    【皇甫】☀独一无二
    【皇甫】☀唯一
    【皇甫】☀一本好书 你值得浏览
    【皇甫】☀标题自己起 进来看像啥就是啥
    【皇甫】☀说说那些选择器
    【皇甫】☀标题被你吃了
    【皇甫】☀四套写入方案(仅供参考)
    【皇甫】☀内侧小解析---小行动(2)
    【皇甫】☀内侧小解析---小行动(1)
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6870361.html
Copyright © 2011-2022 走看看