https://juejin.im/post/5cf0800b6fb9a07ee85c0f89

项目开发完成，接下来是上线，关于vue项目的部署，我司前端是部署在nginx服务器上，关于nginx的相关文档，请自行查阅；本文只记录部署时碰到的一些问题。

打包

vue项目打包后，是生成一系列的静态文件，包括项目的请求IP都打入包内，如果后台服务改动，这时你的前端文件，又要重新编译打包，这里采用的是后台管理项目总结提到的前端自行请求一个配置文件，动态修改你的相关配置。

  • 静态文件
  1. // config.json
  2. {
  3.   "api": "test.com"
  4. }
  • 请求文件

在项目store中请求你的配置文件，写入state中，在调用的时候可以全局访问到你的配置

  1. // api.js
  2. GetConfigApi() {
  3.   return new Promise((resolve, reject) => {
  4.     axios
  5.       .get(`/config.json?v=${new Date().getTime()}`)
  6.       .then(result => {
  7.         const configApi = {
  8.           API: result.data['api'], // 统一接口
  9.         };
  10.         resolve(configApi);
  11.       })
  12.       .catch(error => {
  13.         reject(error);
  14.       });
  15.   });
  16. }

nginx部署

因为vue-router有hash和history不同的两种模式，使用不同的模式，nginx的配置不同，hash模式下，不需要改动，只需要部署你的前端文件就可以了，所以这里只讨论history模式下.conf文件的修改

访问修改nginx配置文件nginx.conf

nano /etc/nginx/nginx.conf

  1.     server {
  2.         listen       80 default_server;
  3.         listen       [::]:80 default_server;
  4.         server_name  _;
  5.         root         /usr/share/nginx/html;
  7.         # Load configuration files for the default server block.
  8.         include /etc/nginx/default.d/*.conf;
  10.         location / {
  11.         }
  13.         error_page 404 /404.html;
  14.             location = /40x.html {
  15.         }
  17.         error_page 500 502 503 504 /50x.html;
  18.             location = /50x.html {
  19.         }
  20.     }

修改后

  1. server {
  2.   listen  80;
  3.   server_name  test.com;
  5.   location / {
  6.     root  /front; 
  7.     index  index.html; 
  8.     try_files $uri $uri/ /index.html; 
  9.   }
  11.   location ~ .*\.(html)$ { 
  12.     add_header Cache-Control no-store;
  13.     add_header Pragma no-cache;
  14.   }
  16. }
  18. 注释：
  20. server {
  21.   listen  80;
  22.   server_name  test.com;
  24.   location / {
  25.     root  /front; // 前端文件路径
  26.     index  index.html; // hash模式只配置访问html就可以了
  27.     try_files $uri $uri/ /index.html; // history模式下
  28.   }
  30.   location ~ .*\.(html)$ {  // 对html文件限制缓存
  31.     add_header Cache-Control no-store;  // 不缓存
  32.     // 或者用add_header Cache-Control no-cache;替代上面那一句，协商缓存
  33.     add_header Pragma no-cache;
  34.   }
  36. }
  40. location / {
  41.   root /home/dist;
  42.   try_files $uri $uri/ @router;
  43.   index index.html;
  44. }
  46. location / {
  47.   root /users/gaohanghang/dist;
  48.   try_files $uri $uri/ @router;
  49.   index index.html;
  50. }

修改完成，使用以下命令重启 nginx 服务

  1. nginx -s reload

访问 ip 地址，如 http://localhost

部署到子级目录

当我们需要把项目部署到子级目录下时，则需要修改项目的BASE_URL，生成一个子级目录下的绝对访问路径。修改对应的.conf配置文件

  1. server {
  2.   listen  80;
  3.   server_name  test.com;
  5.   location /demo {
  6.     alias  /front/demo;
  7.     index  index.html;
  8.     try_files $uri $uri/ /demo/index.html; 
  9.   }
  10. }
  12. 注释
  15. server {
  16.   listen  80;
  17.   server_name  test.com;
  19.   location /demo { // 子级目录
  20.     alias  /front/demo;
  21.     index  index.html;
  22.     try_files $uri $uri/ /demo/index.html; 
  23.   }
  24. }

修改完成，重启服务访问test.com/demo

缓存处理

前端项目的静态文件常常会被浏览器缓存，而项目编译后，js，css，图片等实际上是已经有hash值来去除了缓存，但是项目更新后，仍然会出现缓存问题，这是由于我们的项目整个入口都是在index.html文件上，浏览器实际是缓存了我们的html页面，所以我们要在nginx中告诉浏览器，html文件不被缓存。

  1. location /demo {
  2.     add_header Cache-Control 'private, no-store, max-age=0';
  3.     ...
  4.   }

总结

这里只讨论了nginx相关的部署，实际上vue-router文档上是有相关的配置例子的。

其他总结文章：

作者：Mondo

链接：https://juejin.im/post/5cf0800b6fb9a07ee85c0f89

来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。