Vue 3 <router-view> 在使用历史模式构建后得到评论

Posted 2023-02-22

【中文标题】Vue 3 <router-view> 在使用历史模式构建后得到评论

【英文标题】：Vue 3 <router-view> got commented after build using history mode

【发布时间】：2021-05-23 20:44:40

【问题描述】：

当我使用哈希路由器模式构建我的 Vue 项目时，它运行良好，但是当我使用历史模式构建它时，它只显示导航栏并注释了 <router-view>。我还为历史模式配置了我的 apache 设置。

router.js

import  createRouter, createWebHistory  from 'vue-router'
import Home from '@/views/Home'

const routes = [
  
    path: '/',
    name: 'Home',
    component: Home
  ,
]

const router = createRouter(
  history: createWebHistory(process.env.BASE_URL),
  routes
)

export default router

App.vue

<template>
  <Navbar />
  <router-view />
</template>

<script>
import Navbar from "@/components/Navbar";

export default 
  components:  Navbar ,
;
</script>

我可以直接将 app.vue 上的 <router-view> 替换为 Home 视图组件，它会起作用。但这显然违背了使用 vue 路由器的意义。请大家帮帮我！

另外，这是服务器配置，我正在使用 apache 并将其部署在一个名为 v2 的子目录中

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /v2/
  RewriteRule ^v2/index\.html$ - [L]
  RewriteCond %REQUEST_FILENAME !-f
  RewriteCond %REQUEST_FILENAME !-d
  RewriteRule . v2/index.html [L]
</IfModule>

【参考方案1】：

由于您从子目录/v2 提供应用程序，因此您需要在vue.config.js 中相应地配置publicPath。如果该文件不存在，请在项目根目录中创建该文件。

使用Vue CLI docs 中的条件publicPath，这将允许您在开发和生产中正确地使用它：

module.exports = 
  publicPath: process.env.NODE_ENV === 'production'
    ? '/v2/'
    : '/'

设置publicPath 会更改路由器history 属性中使用的process.env.BASE_URL 的值。