将单页面项目部署到nginx

Question

1. 列表项目我在本地用vue-cli做好了一个项目，然后npm run build将index.html和static打包到了dist文件夹。
2. 那么我想把这个项目部署到个人服务器(已安装nginx服务)上，我直接在conf.d里新增加一个配置文件把port 80和server_name xxx.xxx.xxx定义好，然后把root直接指向dist所在目录,index指向index.html就可以了么？就当这个index.html是一个静态资源？然后直接访问xxx.xxx.xxx？
3. 那如果涉及到数据请求呢？岂不是又存在一个跨域问题？(在vue-cli的dev环境下是可以用proxyTabel来设置代理处理跨域问题,那开发环境呢？)

Answer 1

对于第2个，是这样的，但需要考虑到前后端路由的处理问题，建议使用try_files，设置后类似于这样：

{
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        # 路由前端处理
        try_files $uri /index.html;
    }
}

对于第3个，如果api server支持跨域，可以直接在前端进行http请求时设置baseUrl；如果不设置baseUrl，其实本质跟开发环境一样的，在nginx配置文件里设置代理,类似于：

{
    location /api {
      # proxy
        proxy_pass http://192.168.31.5:8181;
    }
}

关于nginx配置，你可以看下这里nginx入门

Answer 2

1. nginx的配置网上有很多可以参考，另外如果大致清楚各个配置命令的意思，也可以试试用nginxconfig.io在线生成。到时候把dist里的东西放到root命令指向的路径就行了。
2. 需要跨服搞的话，有两种方式：一种是用nginx代理获取，需要写下配置；另一种是用服务器端脚本语言(当然服务器上需要搭环境)，比如node.js或者php，写个代理，然后每次通过代理中转下调用就行了。