資訊專欄INFORMATION COLUMN
摘要：模式下，中存在，用模式就能解決這個問題。但是模式會出現(xiàn)刷新頁面后，頁面出現(xiàn)。解決的辦法是用配置一下。
vue hash模式下，URL中存在"#"，用"history"模式就能解決這個問題。但是history模式會出現(xiàn)刷新頁面后，頁面出現(xiàn)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;#默認(rèn)端口是80，如果端口沒被占用可以不用修改
server_name myapp.com;
root D:/vue/my_app/dist;#vue項(xiàng)目的打包后的dist
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
index index.html index.htm;
}
#對應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個真實(shí)的路徑，所以無法找到具體的文件
#因此需要rewrite到index.html中，然后交給路由在處理請求資源
location @router {
rewrite ^.*$ /index.html last;
}
#.......其他部分省略
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/40137.html
摘要：在路由模式為的時候，刷新頁面會出現(xiàn)問題。我們只需要在服務(wù)器配置如果匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認(rèn)的。表示你監(jiān)聽的端口號打包后的文件夾目錄 在vue路由模式為history的時候，刷新頁面會出現(xiàn)404問題。我們只需要在服務(wù)器配置如果URL匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認(rèn)的index.html。 server { listen 8105; // 表示你nginx監(jiān)聽...
Vue應(yīng)用部署到服務(wù)器的正確方式 很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題，但真正放在服務(wù)器上后，會發(fā)現(xiàn)或多或少的問題，比如：頁面出現(xiàn)空白現(xiàn)象，獲取資源路徑不對等，我相信以VueJs為技術(shù)棧來進(jìn)行前端開發(fā)的小伙伴或多或少都會遇到這樣的問題，我也遇到過，那現(xiàn)在我們就來一一解決這樣的問題。 如何打包 基于Vue-Cli,通過npm run build...
摘要：首先打包之前需要修改文件夾下的其次記得要添加路由頁面在的下的前端文件夾下新建文件夾，并在該文件夾下建立文件，具體內(nèi)容如下 1、首先打包之前需要修改config文件夾下的index.js showImg(https://segmentfault.com/img/bVbnqP7?w=872&h=303); 2、其次記得要添加404路由頁面 showImg(https://segmentfa...
閱讀 3637·2021-11-24 10:22
閱讀 3705·2021-11-22 09:34
閱讀 2510·2021-11-15 11:39
閱讀 1541·2021-10-14 09:42
閱讀 3676·2021-10-08 10:04
閱讀 1570·2019-08-30 15:52
閱讀 863·2019-08-30 13:49
閱讀 3032·2019-08-30 11:21
