Nginx 发布(部署) Vue 项目

• 1、通过 npm run build 进行打包，获得 dist 文件夹

• 2、安装 Nginx 之后，并在配置文件中添加下面的 server 配置，专门针对 vue 的配置，注意调整根目录。

  server {
      # 监听端口
      listen 8088;
      # 主机名称
      # server_name www.xyq.com;
      # 根目录
      root /usr/local/var/vue/chunk/dist;
      # 匹配协议
      location / {
          # 需要指向下面的 @router 否则会出现 Vue 的路由在 Nginx 中刷新出现 404
          try_files $uri $uri/ @router;
          index index.html index.htm;
      }
      # 对应上面的 @router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
      # 因此需要 rewrite 到 index.html 中，然后交给路由在处理请求资源
      location @router {
          rewrite ^.*$ /index.html last;
      }
      # 代理
      # location /api/ {
      #     proxy_pass http://10.0.90.164:8086/;
      # }
  }
  

  或者：

  server {
      # 监听端口
      listen 8088;
      # 主机名称
      # server_name www.xyq.com;
      # 根目录
      root /usr/local/var/vue/chunk/dist;
      # 匹配协议
      location / {
          try_files $uri $uri/ /index.html;
          index index.html index.htm;
      }
      # 代理
      # location /api/ {
      #     proxy_pass http://10.0.90.164:8086/;
      # }
  }
  

3、添加完成之后 nginx -s reload 刷新配置文件，或者重启 nginx 都行，然后就可以通过 http://localhost:8088/ 进行访问了。