本文目录一览：
- 1、在vue-cli3.0中配置webpack
- 2、一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
- 3、VueCLI3打包优化--抽离依赖包
- 4、Vue兼容ie9+
- 5、Vue项目打包发布至npm
- 6、Vue CLI内网安装（禁止运行vue指令解决方案）
在vue-cli3.0中配置webpack
在vue-cli3.0中，对各种配置文件进行了合并，若要进行webpack相关配置，需要在项目根目录下新建vue.config.js文件
在 vue.config.js 中的 configureWebpack 选项提供一个对象：
提示：有些webpack设置选项是基于vue项目设置的，为了保证vue可以正常工作，某些webpack的配置需要遵从vue提供的配置选项，例如
如果你熟悉webpack，你已经可以开始配置项目了
扩展：链式操作---jquery那般的链式书写方式
官方文档：
一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
先看这个表格：
是不是有了一个整体的感觉？我们再来详细的看一下。
官网：
vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。
vue-cli 用于创建 vue2 的项目；
@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。
使用起来还是比较繁琐的，首先要安装脚手架，然后使用 vue create hello-world 创建项目，具体的就不介绍了。
官网：
create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
然后我们可以选择需要的各种插件：
官网：
使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。
目前支持的模板预设如下：
官网：
rollup 是一种打包工具，特点就是，打的包非常精简，体积小。
官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。
尤雨溪在知乎的一次回答（ ）里提到：
webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。
Rollup 是后起之秀，打包更简洁。
vite 把 rollup 变成了“开袋即食”，便于新手入门。
create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。
所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。
VueCLI3打包优化--抽离依赖包
项目开发中，使用了很多依赖包，如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表（ echarts ）等。打包构建，发现有一些包体积过大，会影响首页加载速度。如下所示：
从上图的分析包中，可以将以下插件抽离：
需要删除的依赖包
VueCLI3自带了 webpack analzer ,可通过如下命令即可生成分析包内容，在 dist/report.html
更多请查看：
减少打包体积、加快打包速度，常规的优化有以下两种：
按需加载是通过只引用使用的组件来减少体积，这就会有一个问题：如果项目重度依赖第三方插件（如 ElementUI 、 vant ），那么此方案将无法减少打包的体积。
这里选择CDN的方式， 配置流程 ：
可根据环境变量，仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。
进行包分离以后，打包结果：
vue.config.js 的pages为：
修改如下的地方：
外部扩展(externals)
使用webpack的externals来指定echarts无法减少包的大小
vue-cli利用webpack-bundle-analyzer分析构建产物
Vue兼容ie9+
首先说明一下我在这里使用的是vue-cli3创建的项目，不同版本的配置可能略有差异，不过一切以官方文档的为准，在这里先贴出vue-cli文档链接，因为文档说明还是挺详细的。
进入正题，这里说明一下本文实现兼容应用的是 Babel7.4.0 之前的版本，7.4.0版本前转码主要应用到的工具还是 @Babel/polyfill ，由于Babel默认只转换新的javascript语法，不支持新的Api（如Set，Map，Promise），所以还需要引入 cors.js ，这个项目中没有使用到Generator函数所以不需要引入 regenerator-runtime ，首先用vue-cli3创建的项目package.json文件中有 browserslist 这个字段或是在项目根目录有一个 .browserslistrc 文件，这里是用来指定可用浏览器的范围，关于指定浏览器版本配置可以参考这里 。顺便贴出目前我的配置。
可以在终端运行 npx browserslist 查询当前已选择了那些浏览器
一个用vue-cli创建的项目中默认会使用 @vue/babel-preset-app ，我们可以在node_modules @vue babel-preset-app package.json文件中看到配置了core.js，
没有在entry入口文件进行配置@babel/polyfill网页打开发现很多es6新的Api是不支持的。
此文章作为学习和记录，如果有问题或是不对的地方欢迎各位大佬指出，感激不尽！
Vue项目打包发布至npm
新建一个项目，在根目录创建两个文件夹 packages 和 examples
将原项目中 components 下所有组件复制到新项目的 packages 目录下，如果有字体图标，将字体图标也一并放到 packages 目录下
packages/index.js
main.js
必须在 new Vue() 方法前调用 use 方法注册插件
Vue CLI提供了将Vue项目打包成库的命令，官方文档地址
package.json
在 package.json 中新增一条打包命令，其中 packages/index.js 指定打包入口文件
默认情况下该命令不会将 Vue 打包进去，因为任何引用我们库的Vue项目都默认包含 Vue ，如果使用文件或者CDN方式引入我们的库，则需要使用者手动引入 Vue 。可以通过添加 --inline-vue 参数来内置 Vue 。 --name 来指定打包后的名字。
运行打包命令
package.json
其中 name 不能在 npm 上已经存在， private 必须设置为 false ，否则发布会失败， main 指定的是 import 我们的库时默认导入的文件
如果包的名字已经被其他人使用了，可以声明所有者信息来避免重名冲突。有两种方式来实现，第一种，手动修改 package.json ，将 name 修改为 @username/package-name 。第二种，推荐在新项目中使用， npm init --scope==username 。这个时候，发布包的命令也要进行修改
.npmignore
定义哪些文件在上传到npm时会被忽略。一般而言， examples 是包含测试的文件， packages 是源码， public 是一些静态文件，这些对库的使用者来说意义不大，可以不上传到npm
如果使用了第三方npm源，必须改回npm官方源
切换回官方源命令为 nrm use npm
登录
发布
取消发布
发布时遇到错误时可能是以下原因导致的:
安装
全局导入
使用组件
Vue CLI内网安装（禁止运行vue指令解决方案）
1、Vue cli简介：
Vue cli是一个基于Vue.js 进行快速开发的完整系统，Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
cli(@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue命令。它可以通过vue create快速搭建一个新项目，或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目。
2、 Vue cli安装
npm install -g @vue/cli
安装之后，运行vue指令，遇到以下问题：由于公司内网执行策略限制，会禁止运行vue指令。
解决方案及步骤如下：
第一步：执行Set-ExecutionPolicy RemoteSigned更改执行策略。
第二步：如果没有权限更改全局的执行策略，加上-Scope CurrentUser后再次更改（Set-ExecutionPolicy RemoteSigned -Scope CurrentUser），并为ExecutionPolicy参数提供值为：RemoteSigned。
第三步：执行策略更改完成后，成功运行vue指令。
