vue hash
模式下,URL
中存在'#'
,用'history'
模式就能解決這個問題。但是history
模式會出現刷新頁面後,頁面出現404。解決的辦法是用nginx
配置一下。
在nginx
的配置文件中修改
方法一:
location /{
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
方法二:
vue.js官方教程裏提到的https://router.vuejs.org/zh/g...
server {
listen 8081;#默認端口是80,如果端口沒被佔用可以不用修改
server_name myapp.com;
root D:/vue/my_app/dist;#vue項目的打包後的dist
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
index index.html index.htm;
}
#對應上面的@router,主要原因是路由的路徑資源並不是一個真實的路徑,所以無法找到具體的文件
#因此需要rewrite到index.html中,然後交給路由在處理請求資源
location @router {
rewrite ^.*$ /index.html last;
}
#.......其他部分省略
}