如何通过虚拟目录在 IIS 上部署 Vue.js 应用程序？答案

【问题标题】：How to deploy Vue.js application on IIS over Virtual Directory?如何通过虚拟目录在 IIS 上部署 Vue.js 应用程序？
【发布时间】：2023-03-28 23:40:01
【问题描述】：

我需要在 IIS 上通过虚拟目录部署一个 Vue.js 应用程序，但是当我部署它时，我必须更改我的路由以包含虚拟目录名称。

我原来的路线是这样的：

export const routes = [
    { path: '', component: Default, props: true },
    { path: '/Path', component: Path, props: true },
    { path: '/Path/:IdPath', component: PathForm, props: true }
];

但要工作，我必须更改路由以包含虚拟目录名称，如下所示：

export const routes = [
    { path: '/VirtualDirectory', component: Default, props: true },
    { path: '/VirtualDirectory/Path', component: Path, props: true },
    { path: '/VirtualDirectory/Path/:IdPath', component: PathForm, props: true }
];

这是一个问题，因为如果我需要更改我的服务器或我的虚拟目录，我将不得不重新部署我的 Vue.js 应用程序以包含新的虚拟目录名称。

有没有办法让这个充满活力？

【问题讨论】：

标签： iis vue.js vuejs2 vue-component vue-router

【解决方案1】：

如果你使用 webpack-cli，你可以做的一件事是给你的目录（主要是 vuejs 根目录）一个alias。在你的webpack.config.js 里面所以，在下面这个例子中：

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': path.resolve(__dirname, 'src')
},

@ 将是您的/src 目录的别名。如果您更改它以反映您当前的 vue 根目录，那么您可以毫无问题地迁移您的应用程序。

【讨论】：

【解决方案2】：

您需要配置 publicPath，默认设置为“/”，例如如果您查看生成的 index.html，您会看到：

  <script type="text/javascript" src="/app.js"></script></body>

注意上面的“/app.js”。

您可以通过将 vue.config.js 文件添加到项目的根目录并添加 publicPath 设置来进行配置：

module.exports = {
   publicPath: '/my-virtual-directory'
}

查看官方 Vue 文档https://cli.vuejs.org/config/#publicpath 了解更多信息。

【讨论】：