vue-项目部署到Nginx服务器

vue项目开发完成之后 需要把代码部署到web服务器上，此处以Nginx为例

1. 找到你的项目目录，执行以下代码 npm run build 对vue项目进行打包，没有问题的话，会提示 Build complete.

[root@izm5e331c21uktboqzfrvqz likang-demo]# npm run build

> likang-demo@1.0.0 build /data/wwwroot/vue/likang-demo
> node build/build.js

⠸ building for production...

 Build complete.

2. 代码打包完成之后，默认放在dist目录下

[root@izm5e331c21uktboqzfrvqz likang-demo]# ll dist
total 8
-rw-r--r-- 1 root root  513 May 19 22:35 index.html
drwxr-xr-x 4 root root 4096 May 19 22:35 static

3. 拷贝dist目录下到文件到一个nginx可以访问的目录下,设置一个域名可以访问即可

# 在data/wwwroot/default的目录下
cp  -r dist /data/wwwroot/default

4. 配置nginx，可以访问到该目录下,具体配置如下
   [root@izm5e331c21uktboqzfrvqz dist]# vim /usr/local/nginx/conf/conf.d/www.phpclub.top.conf

server {
    listen 80;
    server_name www.phpclub.top;
    access_log /data/wwwlogs/access_nginx.log combined;
    root /data/wwwroot/default/dist;
    autoindex on;
    index index.html index.htm index.php;
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    location /nginx_status {
      stub_status on;
      access_log off;
      allow 127.0.0.1;
      deny all;
    }
    location /api/ {
        #rewrite  ^/api/(.*)$  http://1908api.phpclub.top/$1;
        proxy_pass http://1908api.phpclub.top/;
    }
    location ~ [^/]\.php(/|$) {
      #fastcgi_pass remote_php_ip:9000;
      fastcgi_pass unix:/dev/shm/php-cgi.sock;
      fastcgi_index index.php;
      include fastcgi.conf;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
      expires 30d;
      access_log off;
    }
    location ~ .*\.(js|css)?$ {
      expires 7d;
      access_log off;
    }
    location ~ ^/(\.user.ini|\.ht|\.git|\.svn|\.project|LICENSE|README.md) {
      deny all;
    }
  }

注意：
这个地方因为vue要调用接口，需要给接口设置代理，让他可以找到我们的api接口，在开发时候不同，可以通过设置index.js 即可代理到服务器，在项目实际上线的时候，必须通过nginx的代理或者是重写去实现请求接口。

（1） 在vue中写的接口地址为 api/getProductList
（2）在Nginx中会判断是否是api相关的请求
（3）如果是api相关的请求，会把请求转发到 http://api.phpclub.top/ 下

 location /api/ {
    #rewrite  ^/api/(.*)$  http://api.phpclub.top/$1;
     proxy_pass http://api.phpclub.top/;
 }