本篇记录一下如何在Linux服务器部署vue项目
刚开始的时候我犯了一个惯性错误，以为部署vue项目和前面部署django服务一样，需要把vue工程文件拷贝到服务器，然后使用命令启动，如 npm run serve 又是安装node环境，又是 npm install 安装依赖包等，一通操作下来，也没搞定。。。 后来偶然看到一篇文章，解释了vue项目到底该怎么部署(其实问问身边的前端开发就知道怎么回事了) 平时在本地开发时，使用 npm run 启动项目，这相当于本地开发调试， 而当调试完成，觉得可以部署到生产环境时，需要把项目打包，打包后会生成一堆静态文件，此时只需借助web服务器访问这些静态文件，前端服务就相当于部署好了 并不需要在服务器在搭一套开发环境，然后运行项目代码！！！
1. 打包项目文件
在项目目录下执行命令
代码语言：javascript复制npm run build会在项目目录下生成一个dist文件夹， 注意1：打包前，还需要进行如下配置：找到项目的config文件夹下面的index.js，定位到build，将里面的assetsPublicPath改成'./
注意2: 打包前，修改前端调用的后端地址为后端服务所在的地址 最后执行命令
代码语言：javascript复制npm run build
可以看到，生成如下dist文件夹
在本地打开index.html，打开后其实就能正常查看前端页面了 打包完成后，把dist整个文件夹传到服务器,我放到了如下地址
代码语言：javascript复制/data/apps/datafactoryfront2. 安装配置nginx
关于nginx的安装以及常用命令可以参考如下文章
代码语言：javascript复制https://www.cnblogs.com/hanmk/p/9258149.html
https://www.cnblogs.com/pxstar/p/14808244.html3.配置nginx代理前端静态资源
打开nginx配置文件
代码语言：javascript复制配置文件所在路径
/usr/local/nginx/conf/nginx.conf
listen：监听80端口，这里不用改动； server_name：默认是localhost，指定(虚拟主机)服务器名称，一般会配置域名(example.org ，www.example.org，可以使用精确的名称、通配符名称或正则表达式定义；当你在外网访问一个请求链接时，nginx会根据你填写的主机名称来匹配是转发到server1还是server2)； location：/ 表示匹配路径，这里表示匹配根路径，里面的root表示匹配到服务器下的dist静态资源文件夹； 关于nginx如何转发请求，之前写过一个例子，里面详细进行了介绍
代码语言：javascript复制https://www.cnblogs.com/hanmk/p/9290533.html配置完成后，访问服务器地址，如：http://192.xxx.xxx.xxx 即可正常打开前端服务
