반응형
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.php
route 파일
또한 이 링크를 체크하는 것이 좋습니다.
언급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 |