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

Question

当我使用哈希路由器模式构建我的 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> 替换为主页视图组件，它会起作用。但这明显违背了使用 vue router 的意义。请大家帮帮我！

此外，这是服务器配置，我使用的是 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>

Answer 1

由于您从子目录 /v2 提供应用程序，您需要在 [=13] 中相应地配置 publicPath =]。如果该文件不存在，请在项目根目录中创建该文件。

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

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

设置 publicPath 更改路由器 history 属性.

中使用的 process.env.BASE_URL 的值

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

Vue 3 <router-view> got commented after build using history mode

javascript

vue.js

vue-router

vue-cli

vuejs3