今天部署 VUE发现不能按正常的静态资源文件部署。部署VUE实数没有太多经验,惭愧惭愧。
我以为是静态资源直接用nginx指向一个静态路径即可,发现访问报错 :
Uncaught SyntaxError: Unexpected token <
后面经过发现,VUE是伪静态,而且是单页面 。
当你访问某个资源的时候,然后再去刷新,就会报错404
先调整如下:
server {
listen 8081;
server_name localhost;
root /usr/local/application/nginx/web/build;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router{
rewrite ^.*$ /index.html last;
}
#代理后台接口
location /api/ {
proxy_pass http://portalServer/;
proxy_set_header Host $host:$server_port;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
这里解释一下 try_files :
当用户请求 http://localhost/example
时,这里的 $uri
就是 /example
。
try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example
(其中 $root
是项目代码安装目录)的文件,就直接把这个文件的内容发送给用户。
显然,目录中没有叫 example 的文件。然后就看 $uri/
,增加了一个 /
,也就是看有没有名为 /$root/example/
的目录。
又找不到,就会 fall back 到 try_files 的最后一个选项 /index.php,发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php
。
rewrite :
rewrite是实现URL重定向的重要指令,他根据regex(正则表达式)来匹配内容跳转到replacement,结尾是flag标记
参考资料:https://www.cnblogs.com/boundless-sky/p/9459775.html
参考资料:https://www.cnblogs.com/mao2080/p/9340026.html
参考资料:https://www.cnblogs.com/brianzhu/p/8624703.html