具体思路是通过将element-ui、vue等常用的包使用外链的方式部署
操作如下：
1、修改index.html页面，再head中引入cdn。
引入cdn.png
2.修改webpack.base.conf.js文件中的module.exports 添加externals配置:
externals: {
vue: 'Vue',
element: 'ElementUI',
},
注意.png
3.删除main.js中的相应import from。因为如果不删除，打包的时候还会把这两个文件打进去
打包的时候删掉引入.png
更新Vue-cli 3.0 （2019年3月30日）：
在Vue-cli 3.0中使用cdn加速的方法：
在根目录中新建vue.config.js:
'use strict'
const CompressionPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir: "../dist",
configureWebpack: config => {
// 开启Gzip压缩
if (isProduction) {
config.plugins.push(new CompressionPlugin({
algorithm:'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}))
// 排除掉要使用cdn的包：
config.externals = {
vue: "Vue",
axios: 'axios',
// 这个地方如果和mian.js一起改为elementUI这种小写的，就会报错找不到，原因未知
"element-ui": "ELEMENT"
}
}
},
// 开发服务器代理转发：
devServer: {
proxy: {
'/api':{
target:'http://localhost:3001/api',
changeOrigin: true,
pathRewrite:{
'/api':''
}
}
}
},
assetsDir: 'static',
indexPath: 'index.ejs',
}
index.html中的内容：
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<title>个人小站</title>
</head>
<body>
<noscript>
<strong>We're sorry but fronted doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
</body>
</html>
