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

- Vakar

---

你找到解决方案了吗？我也有同样的问题：https://stackoverflow.com/questions/50003678/vuejs-build-to-folder-routes-not-working - Pascut

Answer 1

我猜你需要处理重写才能让历史模式正常工作，请查看https://router.vuejs.org/zh/guide/essentials/history-mode.html

nginx:

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

apache (create /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>

- Can Rau

---

基本上，你不能在 PHP 页面中使用 Vue 路由器。 - fpilee

你的意思是已有路由的php页面吗？无论是现有路由还是不存在的路由，你都可以使用Vue..只要根据你的设置和需求来决定。也许你可以澄清一下你的问题？ - Can Rau

Answer 2

在 Lumen 中，在你的 `web.php` 路由文件末尾添加 Route::get('/{vue_capture:[/\w.-]*}', function () { return view('pages.home'); });。

你也许还想看看这个 laracasts 上的链接。

- MajidJafari