e起飞young
一个前端码农的技术博客
vue多页面与cdn配置vue.config.js示例
[ 2020/05/07, 1682阅, 0评 ]

多页模式官方配置说明 https://cli.vuejs.org/zh/config/#pages

const isProd = process.env.NODE_ENV === 'production'
const isDev = process.env.NODE_ENV === 'development'

const cdnResource = {
  dev: {
    css: [
      'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/theme-chalk/index.css'
    ],
    js: []
  },
  build: {
    css: [
      'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.runtime.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.0.3/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.18.1/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/index.js'
    ]
  }
}

module.exports = {
  productionSourceMap: false,
  devServer: {
    host: '0.0.0.0',
    port: 8888
  },
  assetsDir: 'assets',
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: '页面1',
    },
    assist: {
      entry: 'src/pages/assist/assist.js',
      template: 'public/index.html',
      filename: 'assist.html',
      title: '页面2',
    }
  },
  chainWebpack: config => {
    // 单页面入口这样写:
    // config.plugins.delete('prefetch')
    // config.plugin('html')
    // ...
    // 多页模式这样写:
    // 删除懒加载模块的prefetch,降低带宽压力
    config.plugins.delete('prefetch-index')
    config.plugins.delete('prefetch-assist')
    // 添加CDN参数到htmlWebpackPlugin配置中
    config.plugin('html-index').tap(args => {
      if (isProd) {
        args[0].cdn = cdnResource.build
      }
      if (isDev) {
        args[0].cdn = cdnResource.dev
      }
      return args
    })
    config.plugin('html-assist').tap(args => {
      if (isProd) {
        args[0].cdn = cdnResource.build
      }
      if (isDev) {
        args[0].cdn = cdnResource.dev
      }
      return args
    })
  },
  configureWebpack: config => {
    // 开发环境不用cdn,用本地node_modules的资源
    if (isProd) {
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        'element-ui': 'ELEMENT'
      }
    }
  }
}

对应的入口html文件改动如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
</head>

<body>
<noscript>
<strong>We're sorry but it doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>

有朋自远方来...评论一下呗O(∩_∩)O

  • 搜索