iis - Vuejs 部署问题：IIS、路由

Question

我正在努力在本地 IIS 上部署 Vuejs 前端。我想将我的应用程序部署到一个名为 FE_STB 的文件夹中，该文件夹是我的 C:\inetpub\wwwroot 文件夹中的一个子目录。

理想情况下，访问前端的 URL 应该是http://localhost/FE_STB/。

为此，我在 vue.config.js 中尝试了以下操作：

module.exports = {
  // Used to build the path for the css, js
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/FE_STB/'
    : '/',
  // The folder where the app will be built in the project directory instead of the default dist folder
  // outputDir: 'Vue',
};

runningnpm run build会生成一个 index.html、一个 favicon.ico、my img、js、css 和 fonts 文件夹。index.html 包含诸如 ( <link href=/FE_STB/css/chunk-05c5.672f5bfa.css />) 之类的链接标签，我认为它正在朝着好的方向发展。

但是，它不断返回一个

404 未找到错误

当我尝试访问http://localhost/FE_STB/ 时。

另一方面，如果我只将 index.html 复制到我的 IIS 安装 (wwwroot) 的根目录而不是 FE_STB 子目录中，并检查http://localhost/ URL，我的应用程序将正确显示。

但是，当我开始浏览应用程序并点击刷新按钮时，出现错误。例如，如果我在我的应用程序上使用http://localhost/about/并使用 F5 刷新它，我将收到 404 错误，因为它正在寻找明显不存在的 C:\inetpub\wwwroot\about\ 目录.

我还按照vuejs 网站上的说明尝试了 web.config 和 IISrewrite 解决方案，或者尝试添加：

const router = new VueRouter({
  mode: 'history',
  // To define sub-directory folder for the deployment
  base: 'FE_STB',
  routes,
  linkActiveClass: 'active',
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 };
  },
});

在我的 router.js 中，但它不会改变任何东西。

任何提示或指示都会非常有帮助。

谢谢

S。

标签： iisvue.js