Vue路由器在vue cli构建中不起作用

Posted 2023-02-22

【中文标题】Vue路由器在vue cli构建中不起作用

【英文标题】：Vue router not working in vue cli build

【发布时间】：2017-09-22 00:32:56

【问题描述】：

我已经使用 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

【问题讨论】：

您找到解决方案了吗？我有同样的问题：***.com/questions/50003678/…

【参考方案1】：

我想您需要处理重写才能使历史模式正常工作 检查https://router.vuejs.org/en/essentials/history-mode.html

nginx：

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

apache（创建 /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>

【讨论】：

所以基本上你不能在 php 页面中使用 vue 路由器让我们说

你的意思是一个有现有路由的php页面？我会说在任何一种情况下，您都可以使用 vue 的现有路线和不存在的路线..这取决于您的设置和需求..也许您可以澄清您的问题？

【参考方案2】：

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

您可能还想在 laracasts 上查看此 Link