鍍金池/ 問(wèn)答/HTML/ vue-router的history模式頁(yè)面not found?

vue-router的history模式頁(yè)面not found?

首頁(yè)可以顯示,再往下的子頁(yè)就not found了

dev-server.js

import Koa from 'koa'
import path from 'path'
import webpack from 'webpack'
import serve from 'koa-static'
import KoaWebpackDevMiddleware from 'koa-webpack-dev-middleware'
import KoaWebpackHotMiddleware from 'koa-webpack-hot-middleware'
import history from 'koa-connect-history-api-fallback'

import devConf from './webpack.dev.conf'
import config from './../config'

import opn from 'opn'

const webpackConfig = devConf
const autoOpenBrowser = !!config.dev.autoOpenBrowser

const koa = new Koa()
const compiler = webpack(webpackConfig)

koa.use(KoaWebpackDevMiddleware(compiler, {
    publicPath: config.dev.publicPath,
    quiet: true
}))
koa.use(KoaWebpackHotMiddleware(compiler))
koa.use(history({
    rewrites: [
        {
            from: /^\/.*$/,
            to: '/'
        }
    ]
}))
koa.use(serve(path.join(__dirname, '/dist/'), { extensions: ['html'] }))

let _resolve
const readyPromise = new Promise(resolve => {
    _resolve = resolve
})

if (autoOpenBrowser) {
    opn('http://localhost:8001')
}

const server = koa.listen(8001, () => {
    console.log('app listen at 8001')
})

export default {
    ready: readyPromise,
    close: () => {
        server.close()
    }
}

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Landing from './landing'

let routerArr = [
    Landing
]

let routes = []

routerArr.map(route => {
    routes = routes.concat(route)
})

const None = () => import(
    /* webpackChunkName: 'None' */
    '../views/none.vue'
)

const Index = () => import(
    /* webpackChunkName: 'Index' */
    '../views/index.vue'
)

const Login = () => import(
    /* webpackChunkName: 'Index' */
    '../views/login.vue'
)

Vue.use(Router)

routes.push(
    {
        path: '*',
        name: '404',
        component: None
    },
    {
        path: '/',
        name: 'Index',
        component: Index
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    }
)

const router = new Router({
    mode: 'history',
    routes: routes
})
console.log(router, routes)
router.beforeEach((to, from, next) => {
    next()
})

router.afterEach(route => {

})

export default router

跑起來(lái)之后,瀏覽器直接輸?shù)刂吩L問(wèn)login頁(yè)就報(bào)not found。我按照vue-router官網(wǎng)文檔加了koa-connect-history-api-fallback也不行?,F(xiàn)在只是本地開(kāi)發(fā)環(huán)境,還沒(méi)涉及后臺(tái),應(yīng)該后臺(tái)暫時(shí)不需要配置吧?求指導(dǎo)。。。

----------fixed---------
參考鏈接:https://www.jianshu.com/p/c68...
koa.use(history())要放在所有中間件之前,否則頁(yè)面先刷新了,history就沒(méi)用了。原來(lái)還是和koa的架構(gòu)有關(guān)的。。

回答
編輯回答
我不懂

不知道,沒(méi)出現(xiàn)這種問(wèn)題,你的開(kāi)發(fā)環(huán)境是自己搭建的嗎?
我看老版本的vue-cli webpack模板里是這么配的
app.use(require('connect-history-api-fallback')()),不過(guò)這個(gè)app是express的。
新版本的模板里沒(méi)找到哪里有配置,但是能正確跳轉(zhuǎn)。

2017年8月28日 14:51
編輯回答
初心

你是如何輸入的路徑? locahost:8080/login ?這樣?

2017年9月30日 02:42
編輯回答
命于你
{
        path: '*',
        name: '404',
        component: None
    },
    

這個(gè)要放最后一個(gè)路由,不然第一個(gè)匹配到的就是他

2017年8月21日 13:19