vue.js - 如何使用子文件夹中的路由器设置 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”，但也有工作图片，我该如何实现？

编辑:我的路由器配置(默认来自 Manual cli install with router)

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


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

更新:在 vue discord 上，我被建议为此创建 .htaccess，遗憾的是我没有足够的技能来创建一个，甚至不知道将它存储到哪个文件夹。因为我使用的是 php 框架 (Nette)，所以我已经有另一个了

这就是我现在的工作方式:

"publicPath: '/dist'" and "history:createWebHistory(process.env.BASE_URL)" where project is in "/dist"folder, so page goes www.page.com/dist. All work but. I go to"www.page.com" it redirects to "/dist" but when look in html it doesnot generate "/dist/css/chunk-vendors.css" so all imported css ismissing. But when I hit refresh (going directly to www.page.com/dist)chunk-vendors.css is loaded. By default vendors.css is not ingenerated index.html so I guess its done by js. So i got evil thoughtof just paste that vendors.css link manually to my productionindex.html aand it works, althought when going to /dist url directly Iend up with loading this style 2 times lol. Then I got even more evilthought and changed to 'history: createWebHistory("/")' , rebuildedfor production and now i have nice www.page.com and even all importedstyles are working (with that style link pasted in manually), justhave some feeling I will burn in hell.

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 文件夹(例如在 Apache 上)，使用相同 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，它可以加载 vue-router，它将处理您在 URL 中输入的内容的路由匹配。 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 构建生成的)。上一行允许不重定向任何 Assets 文件(vue-router 不应处理任何 Assets 文件)。

希望对你的理解有所帮助! ;)