部署vue项目到远程服务器流程

Git下载vue模块代码

下载好代码后用idea打开代码模块（由于并不是maven项目，所以不用添加maven pom和设置project structure）

打开idea的settings的plugins下载一个vue.js插件（用来识别vue项目模块）

下载vue.js插件之后，需要在windows下安装node.js

下载链接：https://nodejs.org/zh-cn/

安装直接全部点击下一步最后完成安装
安装结束后打开cmd命令窗口
输入以下命令验证是否安装成功,如出现版本号则安装成功


安装成功后,在cmd命令窗口使用如下命令安装npm的国内镜像cnmp
npm install -g cnpm --registry=http://registry.npm.taobao.org
等待安装结束即可,安装完成之后,就可以用cnpm代替npm来安装依赖包

现在打开vue项目模块目录，找到需要运行的项目包，定位到目录下有个package.json文件

在cmd命令窗口中定位到上图例子中有package.json文件的目录下
输入 cnpm install自动对应package.json下载依赖，下载好之后文件目录下会有个node_modules文件夹，里面就是下载好的依赖包

查看你的package.json，里面会对应相关的指令：一般serve是开发时候用的，build是部署打包时候用的，test是测试时候用的

此时你可以在cmd 运行 npm run serve 指令使你的vue模块启动（注意输入指令的时候要查看好指令的目录位置）

或者在你的idea中，右上角同tomcat配置一样，配置一个npm服务



配置好直接运行即可，同cmd中的那个指令运行效果一样

附：如若不能正常启动，有可能根据错误信息修改一些配置。本人遇到相关的问题如下：提示cpexcel.js中有错误

查询解决方法：

运行成功：

配置一下跨域链接后端模块的url，项目不同配置文件不同，下面给个例子参考

发布项目到远程服务器上，首先先npm run build打包成静态文件，会生成一个dist文件夹

在远程服务器下安装下载nginx服务器代理

Nginx简介——Nginx作为负载均衡服务：Nginx 既可以在内部直接支持 Rails 和 PHP 程序对外进行服务，也可以支持作为 HTTP代理服务对外进行服务。处理静态文件，索引文件以及自动索引;打开文件描述符缓冲。无缓存的反向代理加速，简单的负载均衡和容错。
安装好nginx后，在nginx的config文件夹下修改nginx的config配置，然后将build好的dist文件夹压缩打包好放到远程服务器上的nginx下

修改配置：

定位到index.html文件

反向代理的tomcat文件目录，配置nginx的config的时候需要这个目录

届时都配置好之后，远程服务器终端定位到nginx目录下的sbin下

启动nginx，关于如何启动它百度上好多帖子，附上一个：https://blog.csdn.net/shilukun/article/details/87251633?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1331996.8435.16188882800220619&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

启动成功之后，打开浏览器输入远程服务器地址加nginx的监听端口，成功访问