一、Nginx 的安装

官网链接

  1. 安装官网链接的方式去安装即可
  2. 验证是否安装成功，使用 nginx -v 命令
  3. 启动 nginx 服务。使用 nginx 命令
  4. 启动之后，可以通过浏览器访问一下服务器的公网Ip地址。会输出nginx默认的一个页面。

二、本地的 Vue 项目打包构建，生成 dist 文件夹

  1. $ npm run build

三、将打包好的 dist 文件夹里面的内容，上传到服务器 nginx 的 web 目录地址

  1. nginx 的 web 目录地址：/usr/share/nginx/html
  2. 使用 FTP 工具上传代码即可
  3. 重新访问服务器的公网Ip地址即可

四、问题一、城市数据的接口请求报错

原因分析：本地开发时设置的代理，只对本地开发有效。上线无效
问题处理：配置服务器上 nginx 代理

  1. 将服务的 nginx 配置文件下载到本地。（避免修改出错）（/etc/nginx/conf.d/default.conf）
  2. 避免修改出错，对下载下来的文件做一个复制操作。

  3. 修改文件

    1.  # nginx 的代理配置，参考项目中的 vue.config.js 的配置
    2.  location /maizuo {
    3.      # target => proxy_pass
    4.      proxy_pass https://m.maizuo.com;
    5.      # pathRewrite => rewrite
    6.      rewrite ^/maizuo/(.*) /$1 break;
    7.  }

  4. 将nginx配置文件再上传到服务器对应的目录下

  5. 使用 nginx -t 命令，查看配置项是否有误。下面的输出代表正确：

    1. nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    2. nginx: configuration file /etc/nginx/nginx.conf test is successful

  6. 重启 nginx 服务。(nginx 的配置文件修改之后，要重启 nginx 服务。配置才能生效)

    1. $ nginx -s reload

  7. 再访问页面试试

五、/api 的代理配置还没有配，为什么我这边可以访问，而大家访问会出错

  1. 原因是：/api 相关的接口请求的是本地 localhoost:8080 这个地址。然后我这边本地是启动了的。所以不报错。

六、/api 相关的接口，配置好了之后，任然访问不了。

  1. 原因是：接口请求的地址是 localhost:8080
  2. 解决方法是：将请求地址的 localhost:8080 修改成 服务器的 ip 地址即可。
    1. src/utils/request.js
    2. 项目的代码修改之后，需要重新打包再上传