vuecli3项目部署到阿里云centos7.3中的nginx服务器中并访问另一台服务器上服务端系统

vuecli3项目打包部署的步骤如下：

1. 修改 vue.config.js的配置文件
2. 使用 npm build 或其它命令打包
3. 搭建nginx服务器
4. 配置nginx.conf文件
5. 把打包的项目放到nginx指定目录
6. 运行nginx，浏览器输入地址访问项目

下面介绍vue.config.js配置文件的写法：

 

vuecli3项目结构一般都有 两个文件，这两个文件分别是开发环境配置和生产环境配置，并且这两个文件中的配置是全局变量，可以被整个项目获得使用。

 

第一条红线是配置目前是生产环境；第二条红线配置基础的url，提供反向代理使用

重点看框住的部分 "/dev-api" 是配置的全局变量，即当请求地址中存在 "/dev-api" 时，请求会通过 proxy 代理转发到服务器。

下面介绍nginx中的nginx.conf中的写法：

标记 1 是nginx的访问端口为 80 端口。

标记2 是vuecli3项目打包后存放的地址。

重点标记3 是配置vuecli3前端项目访问服务端反向代理以及跨域，这个配置非常重要，其中proxy_pass 是后台程序所在服务器地址。