cli.vuejs（clivuejsorg）

• 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.config.js文件

在 vue.config.js 中的 configureWebpack 选项提供一个对象：

提示：有些webpack设置选项是基于vue项目设置的，为了保证vue可以正常工作，某些webpack的配置需要遵从vue提供的配置选项，例如

如果你熟悉webpack，你已经可以开始配置项目了

扩展：链式操作—jquery那般的链式书写方式

官方文档：

先看这个表格：

是不是有了一个整体的感觉？我们再来详细的看一下。

官网：

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，非常方便快捷，建立的项目也可以统一风格。

项目开发中，使用了很多依赖包，如 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-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是不支持的。

此文章作为学习和记录，如果有问题或是不对的地方欢迎各位大佬指出，感激不尽！

新建一个项目，在根目录创建两个文件夹 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

登录

发布

取消发布

发布时遇到错误时可能是以下原因导致的:

安装

全局导入

使用组件

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指令。