Vuejs 从头部隐藏样式标签 | Laravel-vuejs 应用程序答案

【问题标题】：Vuejs hiding style tag from head | Laravel-vuejs applicationVuejs 从头部隐藏样式标签 | Laravel-vuejs 应用程序
【发布时间】：2019-05-17 07:38:17
【问题描述】：

我正在使用 laravel-vuejs 应用程序。当 vuejs 渲染 css 时，它会在 html 头部附加一些样式标签，如下图所示。有什么办法可以隐藏这个标签。我认为可以在 vuejs 中使用 webpack.conf，方法是添加一些插件，例如 copy-webpack、extra-text-ebpack、optimize-css-assets-webpack 等，但如何在 larave-vue 应用程序中做到这一点。

【问题讨论】：

标签： javascript laravel vue.js webpack vuejs2

【解决方案1】：

你可以在 laravel-mix 中使用 extractVueStyles

extractVueStyles：提取 .vue 组件样式（CSS 内标签）到一个专用文件，而不是将其内联到 HTML 中。

Laravel Mix Options

【讨论】：

【解决方案2】：

我猜你可能会在每个Vue 单个文件组件中写CSS，像这样：

 //test.vue
  <template>
    <div></div>
  </template>
  <style>
     div{
        //...
     }
  </style>

为什么不将这些CSS 写在CSS 文件中，然后在main.js 中使用它？那么您就不必考虑删除这些style 标记。

【讨论】：

是的。我已经写了。不过，如果我避免这样写，这将无法解决问题。因为包以这种方式附加样式。此外，在额外的文件 flle 中编写 css 并在 main.js 中要求它不是实际的方法。范围不会以这种方式工作。