vue-cli脚手架动态配置在index.html头部增加外部js和css呢?

Meta.Qing

已于 2022-09-08 15:38:07 修改

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： vue.js javascript html

于 2022-08-22 13:27:15 首次发布

本文链接：https://blog.csdn.net/qq_20173195/article/details/126463999

版权

Vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

我们实际项目是会调用到外部js和css，以此通过引入组件.下面提供如何在vue项目中快速配置.

首先，我们在index.html <head> 标签中加入一下ejs模板标签，来引入外部css和js文件

 <% if(htmlWebpackPlugin.options.cdn) {%>
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" type="text/css" href="<%=css%>"></link>
      <% } %>
      <% } %>

 <% if(htmlWebpackPlugin.options.cdn) {%>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
      <% } %>
      <% } %>

模板例子:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link  rel="icon" type="image/x-icon" href="./favicon.ico">
    <% if(htmlWebpackPlugin.options.cdn) {%>
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" type="text/css" href="<%=css%>"></link>
      <% } %>
      <% } %>
    <title>标题</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% if(htmlWebpackPlugin.options.cdn) {%>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
      <% } %>
      <% } %>
  </body>
  <script>

  </script>
</html>

其次，在vue.config.js加入一下代码


module.exports = {
  publicPath: './',
  configureWebpack:{
    externals: {
      comDemo1: 'comDemo2'
      }
  },
  chainWebpack: config => {
    config.resolve.alias.set('@', path.join(__dirname, 'src')),
    config.plugin('html').tap(args => {
      args[0].cdn = {                             //以下添加js和css关键
        js: [
          '/pc/js/component1.js',
          '/pc/component1/component2.js'
        ],
        css: [

        '/pc/component1/component2.css'
        ]
      }
      return args
    })

  },
}}

如果原生html-webpack-plugin进行配置：

看下面文章:原生Webpack的html-webpack-plugin配置js,css_Meta.Qing的博客-CSDN博客