vuecli3如何打包部署(vuecli3打包部署生产环境)

vuecli3打包部署非根目录下配置vue.config.jspublicPath

从VueCLI3.3起已弃用baseUrl，请使用publicPath。

默认情况下，VueCLI会假设你的应用是被部署在一个域名的根路径上，例如。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在，则设置publicPath为/my-app/。

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：

在vue.config.js文件中添加如下：

.env.development

.env.test

.env.proction

如果一个环境中，有多个不同请求地址，可以在环境配置文件中多配置几个url，使用时，不配置baseURL，相同请求地址接口写入一个文件，引入相应的url，接口前单独加url。

package.jsonscripts配置

serve命令不携带--mode时，默认运行环境为development

build命令不携带--mode时，默认运行环境为proction

可根据当前环境写死，也可在环境配置文件中，加入打包到的文件夹名（有多个环境的时候比较方便）。

vue.config.js配置

打包出来的文件不提交到git的话，配置.gitignore。将之前的/dist改为/*dist

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架vue，作为一个基础的了解。vue的作者是国人尤雨溪。官网描述vue是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：

基于vue的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没有nodeJs环境，所以直接从环境搭建开始。

配置淘宝源，注意-g是全局安装

完成之后将使用cnpm替换npm，验证cnpm:

之后的依赖安装就可以使用cnpminstallpackage或简写cnpmipackage进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用-g-D--save等参数设置安装范围。

安装vue-cli

vue-cli是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。

安装命令

验证安装

之后我们看到一个hello-world的文件夹，里边包括默认生成的一些配置和App.vue,main.js等程序文件，如下是支持vue-router路由（控制页面切换等操作）的一个main.js具体内容

注意使用路由时，不要忘记在主模板里添加router-view/router-view标签，表示路由切换的位置，否则路由页面无法正常展示。

先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行

之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。

既然提到了部署，默认的部署使用npm/cnpm进行，如下命令，输出内容在/dist目录。

可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

这里说下vue-cli脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。

启动vue-cli图形界面

然后按照提示访问即可。

以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托vue提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。

1.Vue.js介绍

2.VueCLi脚手架

前言

现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包操作。

VUE3多页面打包

方式一：webpack配置

webpack安装参考：[安装|webpack中文网]。

直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：

方式二：vue-cli配置

vue-cli目前已不提供vue.config.js配置文件，但是我们可以手动在package.json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考|VueCLI：

vue3多页面直接运行

使用vue.config.js配置好后，直接使用npmrundev命令即可，对应vue的vue-cli-serviceserve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。

当项目较大时往往会出现打包之后首屏加载时间较长，这样会导致用户体验较差，因此可以开启gzip压缩功能

1）如果是vue2.x，在vue项目中安装依赖并将config.js中的proctionGzip改为true，开启Gzip压缩，npminstall--save-devcompression-webpack-plugin

运行npmrunbuild打包项目，这时如果有提示报错ValidationError:CompressionPluginInvalidOptions，则需要将build中的webpack.prod.conf.js中CompressionWebpackPlugin的设置由asset改为

filename，如图所示

再次运行npmrunbuild打包，如果还有报错，提示TypeError:Cannotreadproperty'emit'ofundefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本：npminstall--save-devcompression-webpack-plugin@1.1.2

最后再次打包

当发现打包文件中有很多.gz的文件时即是打包成功，最后后端服务器开启gzip配置就愉快的配置完成，再次打开地址后会发现首屏速度快了很多

2）?如果是vue-cli3的项目，在开启gzip时会稍有区别，在vue.config.js中配置，先安装依赖cnpm?i?-Dcompression-webpack-plugin

???