Vue router not working in vue cli build

Question

i have project developed with vue cli working fine in dev mode. but when i build it. everything goes fine without the components loaded by routes ('/', component). whats wrong in my code

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')

and

    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

Did you found a solution? I have the same problem: stackoverflow.com/questions/50003678/… — Pascut
– Pascut, Commented Apr 24, 2018 at 14:26

Can Rau · Accepted Answer · 2017-05-19 09:47:46Z

2

I guess you need to handle rewrites for history mode to work check https://router.vuejs.org/en/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>

answered May 19, 2017 at 9:47

Can Rau

3,9202 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fpilee Over a year ago

So basically you can't use vue router in a php page lets say

Can Rau Over a year ago

you mean a php page with existing routes? I would say in either case existing routes and non-existing routes you can use vue..just depends on your setup and needs..maybe you can clarify your question?

MajidJafari · Accepted Answer · 2018-10-10 10:37:12Z

0

in Lumen add Route::get('/{vue_capture:[/\w.-]*}', function () { return view('pages.home'); }); at the end of your web.php route file.

You might also want to check this Link on laracasts

answered Oct 10, 2018 at 10:37

MajidJafari

1,13013 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue router not working in vue cli build

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related