Vue 404頁面處理

問題原因：

刷新頁面時訪問的資源在服務端找不到，因為vue-router設置的路徑不是真實存在的路徑

 

解決方案：

第一步：后端配置

Apache

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> 

nginx

location / { try_files $uri $uri/ /index.html; } 

Native Node.js

const http = require("http") const fs = require("fs") const httpPort = 80 http.createServer((req, res) => { fs.readFile("index.htm", "utf-8", (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" }) res.end(content) }) }).listen(httpPort, () => { console.log("Server listening on: http://localhost:%s", httpPort) })

第二步：前端配置

const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] }) 

-------------------------------------------------------------------------------------------------
如：

   // 404未找到
        {
            path: '*',
            component: notFind,
            meta: {
                title: '404未找到',
            },
        },