如何使用子文件夹中的路由器设置 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'”和“历史： 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 完成的。所以我有邪恶的想法 只是将 vendor.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（因此 process.env.NODE_ENV = 'production'）。

现在，如果您尝试进入本地主机中的 dist 文件夹，使用相同 publicPath 的 vue-router 将失败，因为在您的本地主机上，your-proj/dist 与 /final-sub-folder 中设置的基本 URL 不同配置。所以它只适用于可以匹配基本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 将被重定向到您的 index.html，该 index.html 可以加载将处理的 vue-router您在 URL 中输入的内容的路由匹配。

如果没有这个 .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 处理）。

希望能帮助你理解！ ;)