Vue路由器不能在vue cli中工作

Question

我有用vue cli在開發模式下正常工作的項目。但是當我建立它。沒有路由加載的組件（'/'，組件），一切都會正常進行。 什麼是錯在我的代碼

import Vue from 'vue' 
import App from './App' 
import router from './router/index' 

Vue.config.productionTip = false 
new Vue({ 
    router, 
    template: '<App/>', 
    components: { App } 
}).$mount('#app') 

和

import Vue from 'vue' 
    import Router from 'vue-router' 
    import Home from '@/components/Home.vue' 
    import List from '@/components/List.vue' 
    const router = new Router({ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     component: Home 
    }, 
    { 
     path: '/buy-n-sell/:category', 
     component: List, 
     children: [ 
     { 
      path: '', 
      component: catLists 
     }, 
     { 
      path: 'location/:city', 
      component: cityLists, 
      name: 'citypostList' 
     }, 
     { 
      path: 'subcategory/:subcat', 
      component: subcatList, 
      name: 'subcatpostList' 
     }, 
     { 
      path: 'subcategory/:subcat/:city', 
      component: subcatCityList, 
      name: 'subcatecityList' 
     } 
     ] 
    } 
    ] 
}) 
export default router 

Answer 1

我猜你需要處理的歷史模式的重寫工作 檢查https://router.vuejs.org/en/essentials/history-mode.html

nginx的：

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

阿帕奇（創建/dist/.htaccess）

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