问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

VUE打包，指定css引入位置

头像
RobinTang
    3.9k63761

    VUE项目，npm run build 之后得到的index.html里面，样式文件是在head里面引入的，我想把它挪到后面一点，怎么去指定呢？谢谢。

    补充，下面是webpack打包之后得到的index.html，由于css的引入在head里，导致index.html加载完了之后没有立即显示（也就没有loading-holder的动画了），需要等.css加载完了才有动画效果。想着如何把它挪到后面，让index.html先显示。

    <!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name=viewport>
  <title>测试</title>
  <style>
    #loading-holder {
      /* ... 这里有一大堆动画样式样式 */
    }
  </style>
  <!-- 1.webpack 打包之后css的引入被放到这里了，当前html加载完成之后body里面的loading-holder的样式没法立即生效，需要等下面这个css加载完成之后才生效 -->
  <link href=/static/css/app.6d2ab9adacbeff42de5071997a4b5672.css rel=stylesheet>
</head>

<body>
  <div id=loading-holder>
    <div class=loader>Loading...</div>
  </div>
  <!-- 2.想把1那里的css引用挪到这里 -->
  <div id=app></div>
  <script type=text/javascript src=/static/js/manifest.a8366dee77c78818ed2d.js> </script>
  <script type=text/javascript src=/static/js/vendor.4eb0f786e372c86b301d.js> </script>
  <script type=text/javascriptsrc=/static/js/app.97a3c317982b746504e7.js> </script> </body>
  <script>document.getElementById("loading-holder").remove();</script>
</html>
    前端htmlvue.jswebpack
    阅读 7.1k
    5 个回答
    得票最新
    头像
    chatgpt
      4.2k11043

      css 放在 head 里面的原因是为了保证元素出现的时候不是默认样式产生突变嘛
      所以 css 都放在 head 里面，优先与元素加载
      但是你这里用了个加载的 loading，如果说这个加载的 loading 是可以把所有其他元素都挡住的话，那加载顺序应该是：

      • loading css
      • loading dom
      • other css
      • other dom

      一个我自己在用的方案：
      webpack html template 里面写 loading css 和必要的元素：
      https://github.com/gaoryrt/mi...
      然后 webpack 代码该怎么写怎么写，默认打包出来之后的顺序是：

      • loading css
      • other css
      • loading dom
      • other dom

      在代码初始化完成的时候把 loading 元素隐藏掉就行了

      其实相当于把 loading 动画作为首屏进行了预加载

      头像
      Fury
        2731930

        把style写到body后面

        头像
        raohong
          1.3k1711

          loading css 放在 body 下面不就好了

          头像
          RobinTang
            3.9k63761

            好像没人能很好理解我的意思，这个应该是前端用户体验需要的应该东西嘛，我到处找了，有以下两个有用的方法。

            1、打包之后修改dist/index.html，这里可以直接写个js程序来实现，在package.js里面配置下build的动作就能自动化了。js程序如下：

            const fs = require("fs")
const path = "dist/index.html"
var text = String(fs.readFileSync(path))
const styles = text.match(/<link[^>]*\.css[^>]*>/ig)
const target = '<div id=app></div>';
if (text.indexOf(target) < 0) {
    throw Error('has no inject target: ' + target)
}
styles.map(st => {
    text = text.replace(st, '')
    text = text.replace(target, st + target)
})
fs.writeFileSync(path, text)

            2、webpack打包，引入css是mini-css-extract-plugin插件实现的，在mini-css-extract-plugin的主页也有人提过issue https://github.com/webpack-co...，也有人写过补丁，可以让该插件支持插入引入css文件的位置。可以看这个分支https://github.com/brophdawg1...

            头像
            super_god
              33431321

              你把 loading-holder 的 css 直接写在 模板文件（index.html）里不就可以了吗？
              我不太明白为什么 loading 的样式 需要编译... z
              例如：

              <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .loading-holder{
      ...
      ...
      ...
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 
    写这里都可以..
    <style>
    .loading-holder{
      ...
      ...
      ...
    }
  </style>
    -->
    <div class="loading-holder"></div>
  </div>
</body>
</html>

              你最后那一个 remove() 完全没有必要。
              你直接把loading放在 #app里，vue mounted的时候会替换 #app 的，所以根本不需要手动 remove。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题