Vue前台服务器搭建

前言：Vue服务器采用nginx➕Vue为服务器；

请确保你是以拥有 sudo 权限的用户来登录的服务器
请按照下面的步骤，在 CentOS 中安装 Nginx。

类似于上面的内容，遇到这种情况，输入 y，然后 Enter（回车） 即可继续安装。

启动 Nginx：
sudo systemctl start nginx
通过运行以下命令，来检查 Nginx 的运行状态：
sudo systemctl status nginx
然后会输出类型下面的内容: 其中Active：active代表运行， failed代表暂停

通过下面的命令来打开这两个端口：

国内的服务器厂商，安全组也可能会默认屏蔽这两个端口，比如 阿里云 和 腾讯云，如果在 第 5 步 时发现无法访问，可以自行百度一下如何放开这两个端口。

你可以像管理其他服务那样管理 Nginx。

启动 Nginx
sudo systemctl start nginx

停止 Nginx
sudo systemctl stop nginx

重启 Nginx
sudo systemctl restart nginx

修改 Nginx 配置后，重新加载
sudo systemctl reload nginx

设置开机启动 Nginx
sudo systemctl enable nginx

关闭开机启动 Nginx
sudo systemctl disable nginx

本文引用： # 2019 年如何在 CentOS 7 上安装最新版 Nginx
注意：有可能会出现403 Forbidden，执行 setenforce 0 设置SELinux 成为permissive模式

使用vuejs与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])
具体举例如下：
1、导入vue-resource
<script src="js/vuejs"></script>
<script src="js/vue-resourcejs"></script>
2、基于全局Vue对象使用>简单项目启动的话一般在1秒左右你打开tomcat目录看看webapp里面有没有你的项目文件夹就知道了，你用的myeclipse的话，部署很简单，在服务器图标左侧有个部署按钮，把项目add到服务器里就可以了

熟悉vue项目的开发朋友应该了解，对于vue项目来说，上线其实就是执行npm run build 命令，然后将build出的dist文件夹上传到服务器上就可以了，对于现在的前后端分离项目来说，就是把dist放到nginx的html文件夹即可。
上传的过程既可以手动实现，也可以通过jenkins这类在线编译软件，总之，殊途同归。
除了上面两种还有一种现在比较火的部署方式，就是docker部署，当然正如上面说的，docker也是要实现上面的 *** 作，只不过有些差异而已。
针对docker部署需要了解的是，一般我们只需要拉取nginx镜像，把dist文件夹写入镜像即可，不需要去镜像里面执行拉取代码、执行编译、打包等 *** 作。这些 *** 作一般在写入镜像执行。
这样做的目的跟docker的理念是一致的，功能解耦，方便维护，而且对于一些大公司来说，可能还需要将编译后的代码进行扫描等 *** 作，如果在docker镜像内编译的话如果出现错误是不好定位问题的。
那么如何实现docker部署vue项目呢， *** 作如下参考：
文件目录如下：
在vueProject 根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如下：
build项目：
Build完成后会生成dist目录
然后在vueProject根目录下打开命令行执行如下命令生成镜像：
注意最后是一个点，代表在当前目录执行Dockerfile
如果没报错说明执行成功，此时可以在docker镜像列表看到该镜像。
启动镜像：
—name vp 代表自定义启动的镜像名称
-dp 是-d,-p的简写
8088:80 代表在宿主机的8088端口映射镜像的80端口，因为nginx默认的服务器端口就是80
最后就是之前生成的镜像名称。
大功告成。

更多详情：javascript技术分享

在搞清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参数:

如此项目部署就完成了。

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

一般项目前后端分离得话，都会用nginx作为反向代理转发的。
因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理

其中 vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件 这篇文章详细说明了怎么打包vue项目,记得修改config下的indexjs文件
修改为:(只显示修改的部分)

关于nginx的配置,一定需要注意第二篇文章说到的问题;

proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求 >