Vue SPA 关于 IIS 别名问题

Question

我正在将Vue SPA应用程序部署到IIS，并且站点别名存在一些问题。该站点将部署到 IIS 默认网站，因此它保留在端口 80 上。目前，我将其命名为">vue"作为该站点的别名。这一切都很好，但它将来会更改，这意味着我必须重新编译站点以进行别名更改。

这一切都可以在 web.config 端处理，而不是在我的 vue-router vue.config 中硬编码/vue

吗？我能正确让它工作的唯一方法是首先安装 IIS urlrewrite2 插件并在 dist 文件夹中设置 web.config。

web.config：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/vue/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

路由器.js：

const router = new Router({
mode: 'history', // this will remove #/ from address bar.
base: '/vue',
routes: [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "Main" */ '@/views/Main.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "Login" */ '@/views/Login.vue')
},
{
path: '*',
name: 'error',
component: () => import(/* webpackChunkName: "error" */ '@/views/404.vue')
}
]
});

vue.confi.js：

module.exports = {
productionSourceMap: false,
transpileDependencies: [],
publicPath: '/vue'
};

Answer 1

我认为在管理SPA身份验证调用的回调地址的地址解析时遇到了类似的问题。所以我没有一个确切的解决方案给你，但希望以下建议是有用的：

1) 相对于 root 对应用路由进行编码(即在路由器配置中使用base: '/'而不是base: '/vue。这简化了事情，因为现在您已将地址的所有分辨率转移到 Web 服务器，但现在意味着您需要不同的 IIS 配置。

IIS端的解决方案是在 IIS 中为 SPA 应用程序创建一个专用站点，即用户将通过访问vue.mydomain.com而不是mydomain.com/vue来访问您的网站。这是通过为 IIS 中的 SPA 站点设置主机名(可以是任何内容，我只是使用"vue"作为示例)来实现的，然后确保您的 DNS 服务器配置为vue.domain.com解析为 IIS 服务器的 IP 地址。

这可能感觉它使开发计算机上的配置变得复杂，并且还需要对这些计算机进行DNS更改。诀窍是使用开发/测试计算机上的 hosts 文件使到站点的路由正常工作，而无需更改 DNS。

2) 在您的 SPA 应用程序中，当引用 SPA 站点自己的地址时，尽可能使用window.location.origin来计算相对于源的地址，而不是硬编码地址路径。例如，在我的情况下，我需要定义一个回调路径，我做了如下redirect_uri: window.location.origin + '/callback'。

这是我的首选策略，我喜欢它，因为它将 SPA 应用程序与网站的其余部分隔离开来，简化了路由，并意味着我的开发/测试/生产代码的行为完全相同。如果您绝对需要使用相对路径来访问您的网站，那么我怀疑window.location.origin仍然是您的朋友，但我无法给出有关如何解决您的用例的具体说明。

无论您采用哪种方法，您仍然需要 IIS urlrewrite2 插件来提供重新路由以在路由器中使用历史记录模式进行处理。