Question

我尝试通过条目文件导入（ 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文件实际上使用（并因此覆盖）Bootstrap类，因此需要在 Bootstrap之后将其注入 - 我可以使用当前设置执行此操作吗？ Vue / Webpack ..还是我需要像Gulp这样的任务跑步者？一旦我们构建了项目并且有dist文件就注入cdn是不够的。我们需要在开发项目工作时看到样式的变化。有没有比这两种方法更简单的方法，并且在任何人要求之前 - 没有...由于隐私/安全性，他们不会使它成为npm包。

Answer 1

简单的方法是在所有其他样式之后将其包含在index.html中。顺便说一下：你可以在npm发布私人回购。

Answer 2

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

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

//...
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>

这样做是手动插入静态文件，因此您可以在生产中选择订单。在开发过程中，链接写在body标签中，因为保持标准没有太大问题。

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

2 个答案: