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

【问题标题】：Vue 3 <router-view> got commented after build using history modeVue 3 <router-view> 在使用历史模式构建后得到评论
【发布时间】：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>

【问题讨论】：

标签： javascript vue.js vue-router vue-cli vuejs3

【解决方案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 的值。

【讨论】：