vue-cli3以后，关于webpack打包等的相关配置
最近刚入职一家新的公司，接手了一个新的项目！做一个人脸系统相关的后台管理系统！领导让我选择自己拿手的技术框架，我毫不犹豫的选择了 vue-cli3 + webpack，然后集成了 element-ui作为第三方插件库！
在刚开始开发阶段，一切都很顺利！项目也写的飞快，因为之前有用过element-ui这个第三方插件！但是，当我进行到项目打包发布时，终于碰到了问题！
因为之前一直都是使用[email protected]以下的版本+webpack进行开发，虽然也配置过很多次打包文件，但是这个因为开发过程顺利，没认真看配置文件！当真的打包的时候，才想起来要配置一些文件时，懵逼了！！what？？？build文件夹呢？我的webpack.config.js文件呢？
带着一连串疑问，开始了翻看vue-cli文档的过程！终于，看到了关键性问题！在vue-cli3之后，为了让程序员可以把重心更多的放在开发中，而不是配置文件中，vue-cli3之后的版本，跟react一样，把配置文件默认给隐藏了！！这可急坏了我这个小菜鸟，怎么办？？？继续翻看文档，经过九九八十一难，总算摸索出来了！所以，再次记录下这次的爬坑过程，给自己长点记性！
在vue-cli3之后，如果想要进行打包相关的配置时，需要自己在根目录下创建一个文件夹vue.config.js,而所有相关的打包配置均在这里面执行！
// vue.config.js
module.exports = {
}
调整 webpack 配置最简单的方式就是在 vue.config.js 中的
configureWebpack
选项提供一个对象：
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
在这里只记录下我需要的一些配置，其他的如果想要了解，可以去vue-cli官方文档查看，比较详细！
我在项目打包时，因为一些众所周知的原因，需要重新配置下js/css/img等相关的根路径，而vue-cli3默认的为
/
,现在需要改成
./
,否则会造成访问不到路径的情况，配置如下：
// vue.config.js
module.exports = {
publicPath: './',
}
就是这么简单，只需要把publicPath重新声明为
./
即可！
此外，为了降低打包之后项目的体积，同样会进行一些插件的优化，比如把vue/axios/element-ui从CDN资源库引进！相关的配置如下：
- 在vue.config.js中，引入webpack相关配置，使用externals把打包时需要排除的依赖包等排除在外
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'axios': 'axios',
'nprogress': 'NProgress'
}
}
}
注意： element-ui如果需要从CDN引入，并不需要声明在externals中，只需要把引入部分注释，然后在index.html中引入外部资源包即可！这点跟网上很多的大神们解答的有出入！
- 在main.js配置文件中，注释掉相应的引入
// main.js
// import './plugins/element.js'
// import 'nprogress/nprogress.css'
- 在public文件夹下的index.html文件中，引入相应要从CDN资源库引入的文件（此处因对应自己项目所使用的相关库版本）
// public/index.html
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
至此，打包相关的基本配置就算完成了！项目体积缩减的非常明显！小白一个，记录下自己的开发日常，也希望能给碰到同样问题的朋友们，一点点方向！其实主要问题，还是自己不熟vue-cli3！也奉劝各位同行们，在没有完整阅读过新技术的开发文档时，慎用相关技术哦！大神忽略哈 ~~~
![Vue - 安装Node.js（配置环境变量、配置NPM下载存放目录、NPM设置镜像仓库）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)