vue打包并部署到nginx上的实现示例

npm run build

    server {
        listen       9800; # 这里配置的是打开的端口号
        server_name  localhost; # 这个配置打开时的域名，由于是本地部署就直接使用localhost

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
               # 项目所在路径，由于我们是一整个打包后的dist文件夹放到html目录下的，所以我们的路径就是html/dist/, 注意最后面必须加/
               root   html/dist/;  #项目所在路径，最后面必须加/
               index  index.html index.htm;
               # 匹配项目的入口页，因为是dist文件夹下的，所以路径是/dist/index.html, 注意前面必须加/
               try_files $uri $uri/ /dist/index.html;  #匹配项目的入口页，前面必须加/
        }
        # 下面的是反向的代理，解决跨域问题
        # ^~/api/sjjh/    ^~/api/ 与我们的vue.config.js中proxy是一一对应的
        # proxy_pass 是我们真实对应的 请求地址
        location ^~/api/sjjh/ {
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass xxxx;
        }
        location ^~/api/ {
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
             proxy_pass xxxxx;
        }
      }