小白研究项目部署-关于vue项目部署遇到的一些问题

在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。
（用法我之前的文章也研究过）
此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc

不急，只要找到原因，问题是可以迎刃而解的。

项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。

开发环境 ：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。

生产环境 ：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。

测试环境 ：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。

测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境？

processenvNODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，

可以参考学习： 理解webpack中的processenvNODE_ENV

其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：

接下来我将讲解以下这几个属性的使用。

依照官网的解释，贴一张用法图：

当使用基于 HTML5 historypushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vueconfigjs文件中，你应该这样配置：

在nginx配置文件中你就需要这样配置：
假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图

示例贴一下： 珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。

我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了： 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 indexhtml 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找indexhtml。
可以参考本项目的nginx配置：

但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 indexhtml 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
参考官网例子：

另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:

如此项目部署就完成了。

感谢博哥指出之前文章错误之处，已经修正，谢谢

bsr：浏览器渲染
ssr：服务端渲染。更好的seo（特别是有些信息平台类的站点，更需要被搜索引擎优先搜到）；更好的内容获取速度（少了页面首屏多次ajax请求动态拉取数据并渲染的时间）
vue框架：nuxt

路由 ：

不需要配置路由，pages目录下的vue文件就代表一级路由标签即可，然后在跟组件上加入<nuxt/>，类似于单页面的<router-view/>

声明式导航 ：

使用<nuxt-link/>，类似于单页面的<router-link/>

嵌套路由 ：

父路由组件上面用<nuxt-child/>,也是个组件容器，然后创建父组件同名目录，内部放子组件。

重定向 ：

配置nuxtconfigjs

或者编写中间件

视图 ：

本质还是组件
组件默认加载的是layout目录下的defaultvue文件,可以在路由组件上配置layout属性，指向指定的layout组件文件名

动态获取数据 ：

ssr和bsr的获取数据时机是不一样的。ssr会在vue解析模板之前就把数据准备好，一次渲染完成；而bsr一般是mounted回调再调ajax去拉取数据，然后重新渲染组件。

nuxt为vue组件提供了asyncData配置项，用来拉取数据。

反向代理
用户请求页面的时候请求会在后端完成，然后返回最终模板；如果是用户路由跳转，没有触发浏览器默认的xhr请求，请求是在浏览器（客户端）发送的。

由此会引发另一个问题：浏览器上请求会出现跨域问题。

因此需要服务端配置好反向代理：

npm -i @nuxtjs/axios -D // 这个应该不用手动装，脚手架应该装好了
npm -i @nuxtjs/proxy -D

在nuxtjsconfigjs中添加axios和proxy模块，并配置反向代理

还有一点要注意的是，组件内axios请求的地址配置要调整：

processserver是一个全局变量，用来标识当前环境是不是服务端

第三方组件库（element ui为例）
配置nuxtconfigjs

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端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脚手架

---