首先我使用的是后端接口+前端vue的形式,這樣就涉及到跨域的問題。我是這樣配置的:
server {
listen 80;
server_name www.liangyp.xyz;//訪問網址
location / {
root /var/www/VueApp;
index index.html index.htm;
}
//這里是配置的如果訪問apis則是轉到后端接口,這樣就避免了跨域
location /apis {
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000/;
}
}
然后還遇到一個問題:我在vue中使用的是vue-router跳轉的,如果跳到二級菜單,刷新頁面的話會出現404頁面。這是因為在vue中使用的是js渲染的虛擬目錄,而在nginx配置中並沒有實際的資源,所有會出現404。直接上配置:
server {
listen 80;
server_name www.liangyp.xyz;
location / {
root /var/www/VueApp;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
location /apis {
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:3000/;
}
}
加上這些后就可以正常訪問啦。