一、Nginx 的安装

官方链接

  1. 选择CentOS部分 按照官网的说明安装就可以。
  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工具上传代码即可 下载地址

image.png

  1. 重新访问服务器的公网IP地址

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

    原因分析：本地开发时我们使用了代理设置，只在本地开发有效，上线之后无效。
    问题处理：配置服务器上nginx代理

  2. 找到nginx的配置文件： /etc/nginx/conf.d/default.conf 下载到本地（避免出错）

  3. 对下载完成的文件，进行复制（保留原有文件容错）

  4. 修改文件/etc/nginx/conf.d/default.conf

    1. # 访问/路径
    2. location / {
    3.   # 访问这里配置好的根目录
    4.   root   /usr/share/nginx/html;
    5.   # 默认页面
    6.   index  index.html index.htm;
    7. }
    8. # nginx 的代理配置，参考项目中的vue.config.js的配置
    9. location /maizuo {
    10. # target => proxy_pass
    11. proxy_pass https://m.maizuo.com;
    12. # pathRewrite => rewrite
    13. rewrite ^/maizuo/(.*) /$1 break;
    14. }
    15. location /api {
    16. # target => proxy_pass
    17. proxy_pass https://mhd.zhuishushenqi.com;
    18. # pathRewrite => rewrite
    19. rewrite ^/api/(.*) /$1 break;
    20. }

  5. 将修改好的配置文件，上传到服务器原有位置上传

  6. 使用 nginx -t 命令，查看配置项是否有误，下述ok为成功

image.png

  1. 重启nginx服务。（nginx的配置文件修改之后，要重启服务，才能生效）

    1. nginx -s reload

  2. 再次访问页面就好

    五、相关接口，配置好了以后，仍然访问不了

  3. 原因是：接口请求的地址是 localhost:8080

  4. 解决方法是：将请求地址localhost:8080修改成服务器的ip地址即可。

    1. // 直接 将baseURL 修改成线上ip地址能够处理问题，但是不够优雅，因为后续会频繁的去修改它。
    2. // 推荐使用环境变量来做控制
    3. baseURL: process.env.NODE_ENV === 'production' ? 'http://localhost:8080' : 'http://154.8.228.120/',

  5. 修改以后，将项目重新打包，再上线。