如何使用子文件夹中的路由器设置 vue 3

Question

我使用 cli 安装了新的 vue 3 应用程序，其中还包含 vue 路由器。

在我的网站上，我已将构建的文件放入 www/dist 子文件夹中。然后在我的 php 索引文件中，我手动将所有 js/css 文件链接到 /dist 文件夹。

我在组件中有一个图像

<img class="discord-icon" src="@/assets/discord.png">

当我设置 publicHtml = '/dist' 时，即使显示图像，一切正常，但由于某种原因，我的主页从原始的“www.page.com”重定向到“www.page.com/dist”

我想在主页上有默认的“www.page.com”，但也有工作图像，我怎样才能实现这一点？

编辑：我的路由器配置（默认来自使用路由器手动 cli 安装）

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  }
]


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

更新：在 vue Discord 上，我被建议为此创建 .htaccess，遗憾的是我不够熟练，无法创建一个，甚至不知道将其存储在哪个文件夹中。另外，因为我使用 php 框架（Nette），所以我已经有另一个了

这就是我现在让它工作的方式：

“publicPath: '/dist'” 和 “history: createWebHistory(process.env.BASE_URL)” 其中项目位于“/dist”文件夹中，因此页面为www.page.com/dist。所有工作但是。我访问“www.page.com”，它重定向到“/dist”，但是当查看 html 时，它不会生成“/dist/css/chunk-vendors.css”，因此所有导入的 css 都丢失了。但是当我点击刷新（直接进入www.page.com/dist）时， chunk-vendors.css 被加载。默认情况下，vendors.css 不在生成的index.html 中，所以我猜它是由js 完成的。所以我邪恶地想到，只需将vendors.css链接手动粘贴到我的生产index.html中，它就可以工作，尽管当直接转到/dist url时，我最终会加载此样式2次，哈哈。然后我有了更邪恶的想法，并更改为 'history: createWebHistory("/")' ，为生产而重建，现在我有很好的www.page.com，甚至所有导入的样式都可以工作（手动粘贴该样式链接） ，只是有一些感觉我会在地狱中燃烧。

Answer 1

以下是 vue-cli 项目通常如何构建并推送到服务器的一些总结。什么样的配置是重要的以及它们的目的是什么。希望它能让您了解如何设置您的项目。

使用 Vue CLI 构建

这是在常规项目中使用 vue-cli 构建的工作方式：

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/final-sub-folder' : '',
  // ...
}

上面的配置为 dev 和 prod 设置了不同的站点 URL。prod/final-sub-folder意味着在远程服务器的最终 URL 上将出现此子文件夹（例如https://example.com/final-sub-folder）。

当使用 Vue Cli 构建时，npm run build输出进入/dist文件夹（默认情况下），并且默认情况下为 prod 设置构建（so process.env.NODE_ENV = 'production'）。

现在，如果您尝试进入本地主机中的 dist 文件夹（例如在 Apache 上），使用该文件夹的 vue-routerpublicPath将失败，因为本地主机上的基本 URL 与配置中your-proj/dist设置的基本 URL 不同。/final-sub-folder所以它只能在基本 url 可以匹配的最终服务器中起作用。

设置 vue-router

你的 vue-router 应始终设置为（此配置适用于 vue-router@next - 适用于 Vue 3）：

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

这样它就会遵循您在 vue 配置中的一个位置设置的基本 URL。

（注意：createWebHistory 删除了#URL 中的 ）

添加一个.htaccess

关于.htaccess，通常的做法是在其中设置重定向，以便在最终服务器上，https://example.com/final-sub-folder/a-sub-page直接访问将被重定向到可以加载 vue-router 的 index.html，该 vue-router 将处理您在中输入的内容的路由匹配网址。 https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

如果没有这个 .htaccess，则无法从子文件夹访问 Vue 路由器，因为它在服务器上不存在（它是使用重写引擎的虚拟路由），这将导致找不到 URL。

这是一个简单的例子.htaccess：

Options +FollowSymlinks
Options -Indexes

RewriteEngine On
RewriteRule \.(js|css|map|jpe?g|svg|gif|png|eot|ttf|woff2?)(\?.*)?$ - [NC,QSA,L]
RewriteRule .* index.html [NC,QSA,L]

重要的是最后一行将所有内容重定向到index.html（这是从vue-cli 构建生成的）。上一行允许任何资产文件不被重定向（vue-router 不应处理任何资产文件）。

希望能帮助您理解！;)