nginx 引用vue打包的静态文件_【Nginx，Vue】Nginx 配置静态文件支持(Vue打包文件使用Nginx托管)...

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

Nginx 对于静态文件的处理能力是非常高效的。因此许多前端会选择直接使用Nginx来帮助我们进行静态文件的资源管理，而Vue项目经过build过后，产生的静态文件(js+html+js)等文件，都可以放在nginx里面进行托管。

对于history模式的vue项目，在build时，务必将 publicPath 修改为 "./" (默认可能没有或是"/") 这样就不仅可以适配二级路径，根路径也会兼容。 下面贴出一个针对二级路径的配置。

# 这里直接给出 location 级别的配置(如果是根路径项目，将 /webapp/ 改成 / 就好了)：

location /webapp/ {

# 这样一来，每次请求 http://www.host.com/webapp/ 就会打开 public 目录下的 webapp 目录里的 index.html 文件

root C:/www/public;

# 找不到指定文件时返回index.html，这样可支持 history 模式的路由

try_files $uri $uri/ /index.html =404;

index index.html;

default_type 'text/html';

add_header Cache-Control no-cache;

gzip on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩

gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越