programing

Vue 라우터가 vue CLI 빌드에서 작동하지 않음

prostudy 2022. 7. 8. 22:08
반응형

Vue 라우터가 vue CLI 빌드에서 작동하지 않음

개발 모드에서 정상적으로 동작하는 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

이력 모드가 동작하려면 , 개서를 처리할 필요가 있을 것 같습니다.https://router.vuejs.org/en/essentials/history-mode.html 를 체크해 주세요.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>

Lumen add에서Route::get('/{vue_capture:[/\w.-]*}', function () { return view('pages.home'); });말미에web.phproute 파일

또한 이 링크를 체크하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/43603131/vue-router-not-working-in-vue-cli-build

반응형

'programing' 카테고리의 다른 글

_DEBUG vs NDEBUG  (0) 2022.07.08
vue 컴포넌트에 html 전달  (0) 2022.07.08
Java 8 속성별 구별  (0) 2022.07.08
Vue2.js - 오브젝트 내의 메서드를 호출하여 콜백합니다(이 문제).  (0) 2022.07.08
Java 글로벌 변수  (0) 2022.07.08