Django+Vue项目学习第九篇：vue项目部署到服务器

本篇记录一下如何在Linux服务器部署vue项目

刚开始的时候我犯了一个惯性错误，以为部署vue项目和前面部署django服务一样，需要把vue工程文件拷贝到服务器，然后使用命令启动，如npm run serve

又是安装node环境，又是npm install安装依赖包等，一通操作下来，也没搞定。。。

 

后来偶然看到一篇文章，解释了vue项目到底该怎么部署(其实问问身边的前端开发就知道怎么回事了)

平时在本地开发时，使用npm run启动项目，这相当于本地开发调试，

而当调试完成，觉得可以部署到生产环境时，需要把项目打包，打包后会生成一堆静态文件，此时只需借助web服务器访问这些静态文件，前端服务就相当于部署好了

并不需要在服务器在搭一套开发环境，然后运行项目代码！！！

1、打包项目文件

在项目目录下执行命令 npm run build 即可，会在项目目录下生成一个dist文件夹，

注意1：打包前，还需要进行如下配置：找到项目的config文件夹下面的index.js，定位到build，将里面的assetsPublicPath改成'./

 

如果你的vue版本比较新，可能没有上述文件，此应该修改另一个文件

在项目根目录下找到vue.config.js，如果没有，则新建一个文件，添加如下内容

module.exports = {
    publicPath: './'
}

注意2: 打包前，修改前端调用的后端地址为后端服务所在的地址

最后执行命令 npm run build

可以看到，生成如下dist文件夹

 

在本地打开index.html，打开后其实就能正常查看前端页面了

打包完成后，把dist整个文件夹传到服务器,我放到了如下地址

/data/apps/datafactoryfront

千万不能放到root目录下！！！

2、安装配置nginx

关于nginx的安装以及常用命令可以参考如下文章

https://www.cnblogs.com/hanmk/p/9258149.html

https://www.cnblogs.com/pxstar/p/14808244.html

3、配置nginx代理前端静态资源

打开nginx配置文件

配置文件所在路径

/usr/local/nginx/conf/nginx.conf

listen：监听80端口，这里不用改动；

server_name：默认是localhost，指定(虚拟主机)服务器名称，一般会配置域名(example.org ，www.example.org，可以使用精确的名称、通配符名称或正则表达式定义；当你在外网访问一个请求链接时，nginx会根据你填写的主机名称来匹配是转发到server1还是server2)；

location：/ 表示匹配路径，这里表示匹配根路径，里面的root表示匹配到服务器下的dist静态资源文件夹；

 

关于nginx如何转发请求，之前写过一个例子，里面详细进行了介绍

https://www.cnblogs.com/hanmk/p/9290533.html

配置完成后，访问服务器地址，如：http://192.xxx.xxx.xxx  即可正常打开前端服务