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

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

const isProduction = process.env.NODE_ENV === 'production'
const isDevelopment = process.env.NODE_ENV === 'development'

const cdn = {
    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 => {
        // 删除懒加载模块的prefetch,降低带宽压力
        config.plugins.delete('prefetch-index')
        config.plugins.delete('prefetch-assist')
        // 添加CDN参数到htmlWebpackPlugin配置中
        config.plugin('html-index').tap(args => {
            if (isProduction) {
                args[0].cdn = cdn.build
            }
            if (isDevelopment) {
                args[0].cdn = cdn.dev
            }
            return args
        })
        config.plugin('html-assist').tap(args => {
            if (isProduction) {
                args[0].cdn = cdn.build
            }
            if (isDevelopment) {
                args[0].cdn = cdn.dev
            }
            return args
        })
    },
    configureWebpack: config => {
        if (isProduction) {
            // 用cdn方式引入
            config.externals = {
                'vue': 'Vue',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios',
                'element-ui': 'ELEMENT'
            }
        }
    }
}

对应的index.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

  • 搜索