vue-cli 3 编译时 css 放在 body 里

Z时代
2024-01-10
分类：综合

vue

修改 `vue.config.js`

// https://stackoverflow.com/questions/58263664/vue-js-inject-styles-in-body-instead-of-head-of-index-html-webpack-htmlweb
class InjectStylesInBody {
  apply(compiler) {
    compiler.hooks.compilation.tap('inject-styles-in-body', (compilation) => {
      if (!compilation.hooks.htmlWebpackPluginAlterAssetTags) return
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tap('inject-styles-in-body', function(pluginArgs) {
        const { head, body } = pluginArgs
        const styles = []
        head.filter(asset => asset.tagName === 'link' && asset.attributes && asset.attributes.rel === 'stylesheet')
          .forEach(asset => {
            head.splice(head.indexOf(asset), 1)
            styles.push(asset)
          })
        if (styles.length > 0) {
          // unshift 先加载样式, 再加载脚本 !
          // 先加载脚本可能会出现样式错误的问题 !
          body.unshift(...styles)
        }
      })
    })
  }
}
// vue.config.js
module.exports = {
    chainWebpack: config => {
      config
        .plugin('html')
        .tap(args => {
          args[0].inject = 'body'
          return args
        }).end()
        .plugin('inject-styles-in-body')
        .use(InjectStylesInBody).end()
    },
	...
}