vue-cli3.x 多页面打包引入CDN

最新推荐文章于 2024-04-25 08:57:56 发布

小白肥仔

最新推荐文章于 2024-04-25 08:57:56 发布

阅读量1.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_18149661/article/details/107233451

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

entry.js 入口

const glob = require('glob')
const path = require('path')
// 配置pages多页面获取当前文件夹下的html和js
function getEntry (globPath) {
  let [entries, basename] = [{}, '']
  let tmp
  let pathname
  let template
  let filename
  glob.sync(globPath).forEach(function (entry, i) {
    template = entry.split('.')[0] + '.html'
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split('/').splice(-3)
    pathname = tmp.splice(0, 1) + '/' + basename // 正确输出js和html的路径
    filename = pathname + '.html'
    entries[basename] = {
      entry,
      template,
      filename,
      // chunks: []
      chunks: ['chunk-vendors', 'chunk-common', basename]
    }
  })

  return entries
}

module.exports = getEntry

vue.config.js 配置要引入的cdn

const getEntry = require('./entry.js')
const cdn = { // 引用的CDN地址
  js: ['https://cdn.jsdelivr.net/npm/vue']
}
module.exports = {
  pages: getEntry('src/modules/*/*.js'), // 入口
  chainWebpack: config => {
    const entry = Object.keys(getEntry('src/modules/*/*.js'))
    for (const iterator of entry) {
       config
        .plugin(`html-${iterator}`)
        .tap(args => {
           args[0].cdn = cdn;
           return args
        })
    }
  }
  configureWebpack: (config) => {
    if (isProduction) { // 判断是否是生产环境
      config.externals = { // 需要以cdn引入的模块
         'vue': 'Vue'
      }
    }
  }
}

index.html，遍历cdn引入地址

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="app"></div>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>

</html>

小白肥仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue-cli3.x 多页面打包引入CDN

entry.js 入口const glob = require('glob')const path = require('path')// 配置pages多页面获取当前文件夹下的html和jsfunction getEntry (globPath) { let [entries, basename] = [{}, ''] let tmp let pathname let template let filename glob.sync(globPath).forEach(fun
复制链接

扫一扫