vue项目 使用nginx代理

nginx是一个高性能的HTTP和反向代理服务器。所以经常使用来作静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目，项目基于vue官方的脚手架vue-cli构建。

打包vue项目

npm run build

经过上面命令后打包好的静态资源将输出到dist目录中。如图所示

 

如图所示

修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片断

  server {
        listen       8888;#默认端口是80，若是端口没被占用能够不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        E:/vue/my_project/dist;#vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#须要指向下面的@router不然会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要缘由是路由的路径资源并非一个真实的路径，因此没法找到具体的文件
        #所以须要rewrite到index.html中，而后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其余部分省略
  }

 

完成nginx配置后从新加载配置文件，命令以下（ps:须要在安装的根路径下执行）：

nginx -s reload

浏览器中访问：http://localhost:8888

一般状况下ngxin是安装到单独的服务器上，所以通常是把vue打包后的dist仍到服务上的具体位置，而后修改nginx.conf的root路径来指向咱们的dist。