2020-01-17 Vue-cli-3 build serve时区分生产环境，测试环境。

实际项目开发中，经常会有测试环境和生产环境，不同环境的域名是不一致的，因为build构建打包时，processenvNODE_ENV默认是production的生产环境，所以我们每次build和serve都要手动更改请求域名。

关于 vueconfigjs 相关的配置不做过多的讲解了，可自行阅读 vueCli官网文档

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

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

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

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

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

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

验证安装

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

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

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

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

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

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

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

启动 vue-cli 图形界面

然后按照提示访问即可。

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

1 Vuejs介绍
2 Vue CLi脚手架

在 Vuejs 中，开发环境和生产环境使用的是不同的构建版本。开发环境需要使用包含了完整的调试信息和错误提示的完整版构建，以方便开发和调试；而生产环境则需要使用已经经过压缩和优化，去掉了调试信息和错误提示的运行时构建以提高应用性能。
因此，在 Vuejs 中，针对生产环境的构建版本是必须进行编译的，无法不编译。只有经过编译的版本才能被浏览器识别和正确地运行。
如果您想预编译 Vue 组件，可以使用工具如 vue-loader 或者 `vue-template-compiler` 做预编译。这些工具会把 `vue` 文件中的模版编译成渲染函数(render functions)，这样可以优化首次加载速度，但仍然需要将编译后的结果包含在您的最终构建文件中。
在构建生产环境的 Vue 应用时，可以选择把常用的库或组件提取到 vendor chunk 中，并启用代码分割（code splitting）功能，以减小每次更新后需要下载的应用代码体积，提高应用性能。

1在项目根目录， 注意是项目根目录， 跟vueconfigjs、src文件夹同级。
新建文件： envproduction

和文件： envtest

2在packagejson文件中修改命令配置

以上配置完成后
可以在整个项目中获取到以下变量(几乎所有地方)

最好是安装一个。
1如果你仅仅是打包好的vue相机，那么要看服务端使用的是什么语言，如果是node的话，肯定要安装node环境的，但是如果不是node，那么就没有必要了。
2如果你想在服务端跑vue的项目，也就是在远程端做开发工作，那么肯定是要安装node的，毕竟vue开发环境需要node。
基本上服务端也就这两种需求，node包其实很小，安装一个也不费事，还可以方便开发，我觉得在远程端按一个最好。

在 config/indexjs 中有开发环境与生产环境的相关配置。

工程build相关配置：

其中 env: require('/prodenv') 指生产环境配置信息。存放在 prodenvjs 内，具体内容为：

修改完毕后，进行打包并与后台工程合并部署。

---