在项目开发中我们常用到的一些类库，例如vue、elemenu-ui、axios、vue-router等等这些不长更改的文件，可以在vue.config.js里做下cdn配置,这样做的好处是可以减少项目打包后生成的css、js等文件的大小、优化项目加载速度

vue-cli4安装参考

配置如下

vue.config.js 文件

const cdn = {//cdn地址可以改为引用最新的
    css: ["https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css"],
    js:[
        "https://unpkg.com/vue@2.6.12/dist/vue.min.js",
        "//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
        "//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
        "//unpkg.com/axios@0.19.0/dist/axios.min.js",
        "//unpkg.com/element-ui@2.10.1/lib/index.js"
    ]
};
module.exports = {
    productionSourceMap: false,//关闭生产环境 sourceMap
    lintOnSave: false,
    configureWebpack:config =>{
        config.externals = {
            vue: "Vue",
            "element-ui": "ELEMENT",
            "vue-router": "VueRouter",
            vuex: "Vuex",
            axios: "axios"
        }
    },
    pages:{
        index:{//入口页面配置
            entry: 'src/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            cdn:cdn,//配置cdn
            chunks: ['chunk-vendors', 'chunk-common', 'index'],
            title:"测试vue cdn"
        }
    }
}

这样配置完成之后, 运行 npm run build 打包项目后，可以看到，css、js 文件大小明显下降了