如何在 Vue cli 项目中使用 Webpack 包含我公司的全局样式 CDN（供开发人员使用）？

Posted 2023-02-22

技术标签:

【中文标题】如何在 Vue cli 项目中使用 Webpack 包含我公司的全局样式 CDN（供开发人员使用）？【英文标题】：How do I include my company's global styles CDN (for dev use) using Webpack, within a Vue cli project? 【发布时间】：2018-05-01 08:41:10 【问题描述】：

我尝试通过入口文件 (main.js) 导入...

import Vue from 'vue'
import App from '@/App'
import router from '@/router/router'
import store from '@/store/store'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import  Popover  from 'bootstrap-vue/es/directives'
import 'https://mycompany/main.min.css'

Vue.use(BootstrapVue)
Vue.use(Popover)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
  el: '#app',
  store,
  router,
  template: '<App/>',
  components:  App 
)

我尝试通过大量在线帖子在 webpack.base.config（externals 或 publicPath）中找到一个位置 - 但没有回答了我的问题，足以让它发挥作用......

通过 CDN 传递的 css 文件本质上使用（并因此覆盖）引导程序类，因此需要将其注入到 after 引导程序中 - 我可以使用我当前的设置来执行此操作吗？ Vue/Webpack .. 还是我需要像 Gulp 这样的任务运行器？一旦我们构建了项目并拥有了 dist 文件，仅仅注入 cdn 是不够的。我们需要在开发人员处理项目时查看样式的变化。有没有比这两种方法更简单的方法，并且在任何人问之前 - 不..由于隐私/安全性，他们不会将其设为 npm 包。

【问题讨论】：

这听起来肯定违反了某种编码标准，对吧？另外，我认为我不清楚；所以修改了我的问题。我们需要在开发模式下处理项目时看到样式的变化，而不仅仅是使用 dist 文件构建。 【参考方案1】：

简单的方法是在所有其他样式之后将其包含在您的 index.html 中。顺便说一句：你可以在 npm 上发布私有仓库。

【讨论】：

样式在应用程序构建时被注入 - 所以即使我确实把它放在 index.html 中，它也会是第一个，在它之后包含供应商样式（因此不会覆盖各种样式）。我们现在正在研究 npm 私人回购.. 但不确定他们是否会同意。这是希望！它也将有助于我们代码库的其他实现中的其他版本控制！你的构建应用是一个 index.html 文件和一些 css + js + assets。我不明白为什么在头部末尾包含外部 CSS 不起作用？我假设您没有使用内联 css ？如果你的意思是一旦建成，那不是我需要的：/我可能不清楚，会修改问题以适应。我需要开发人员在开发模式下运行项目时查看他们的风格变化，而不仅仅是在构建文件时使用它，并且只是在我想要的 index.html 中使用 cdn（这会更容易！）..跨度> 【参考方案2】：

一种方法是直接处理HtmlWebpackPlugin使用的模板。

首先在build/webpack.prod.conf中禁用inject：

//...
new HtmlWebpackPlugin(
  //...
  inject: false,
  //...
)
//...

在你的index.html:

<!DOCTYPE html>
<html>

<head>
  <!-- ... -->
  <% if (process.env.NODE_ENV === 'production')  %>
    <% for (file of htmlWebpackPlugin.files.css)  %>
      <link rel="stylesheet" href="<%= file %>">
    <%  %>
    <link rel="stylesheet" href="https://mycompany/main.min.css">
  <%  %>
</head>

<body>
  <!-- ... -->
  <div id="app"></div>
  <% if (process.env.NODE_ENV !== 'production')  %>
    <!-- During development there's less of a problem with putting stylesheets in the body -->
     <link rel="stylesheet" href="https://mycompany/main.min.css">
  <%  else %>
    <% for (file of htmlWebpackPlugin.files.js)  %>
      <script src="<%= file %>" type="text/javascript"></script>
    <%  %>
  <%  %>
</body>

</html>