运行“npm run build”时生成 web.config 文件答案

【问题标题】：Generate web.config file when running "npm run build"运行“npm run build”时生成 web.config 文件
【发布时间】：2021-02-18 20:24:14
【问题描述】：

我在 IIS 中提供了一个 Vue 应用程序。根据指令here，我需要 dist 文件夹有一个自定义的 web.config 文件。我现在遇到的问题是，每当我运行“npm run build”时，整个 dist 文件夹都会被删除，并且我的 web.config 文件丢失了，我需要重新创建一个。由于文件很小，这并不是什么大不了的事，但我真的很想自动化这个。

我现在的工作方式是去我的测试机，git pull main dev 分支，执行“npm run build”，创建web.config文件，放到dist文件夹下。我猜我可以在我的 CI/CD 管道中执行此操作（我还没有……），但我想知道在 CI/CD 之外是否有任何方法可以执行此操作？任何方式我都可以运行“npm run build”，它会自动为我生成/复制一个 web.config 文件？

【问题讨论】：

放入public文件夹。那里的所有内容都按原样复制到 dist 文件夹
不敢相信这么简单...如果你把它放在答案部分，我会接受你的答案:)

标签： vue.js

【解决方案1】：

Vue CLI 生成的项目配置为将public 文件夹中的任何内容直接复制到构建输出目录（默认为dist）。他们通过 Webpack Copy 插件实现了这一点。

唯一的例外是index.html 文件，它在被复制之前经过了一些预处理以注入脚本和样式表。

考虑到这一点，将您的web.config 文件放在public 目录中，它将逐字包含在您的构建中。

【讨论】：

这样做会导致 pwa 缓存包括 web.config 作为浏览器应该请求的文件

【解决方案2】：

@Phil's answer 如果你有一个不需要任何变量扩展的不变的web.config 文件，那就简单而完美。但是，如果您想生成一个 web.config 文件，其中包括例如带有 BASE_URL 的重写规则，则以下内容将起作用：

在vue.config.js:


"use strict";

// Do NOT use the HtmlWebpackPlugin name to avoid a collision with standard Vue usage of the html-webpack-plugin
// NOTE also this uses the vue-cli-service dependency path for html-webpack-plugin
// Beware if the require() path is incorrect, it may fail silently, thus ignoring vue.config.js (per (per https://github.com/vuejs/vue-cli/issues/5442)
const HtmlWebpackPlugin2 = require('@vue/cli-service/node_modules/html-webpack-plugin');

module.exports = {
  devServer: {
    disableHostCheck: true,
  },
  transpileDependencies: ['vuetify'],
  publicPath: process.env.NODE_ENV === 'production' ? process.env.BASE_URL : '/',
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin2({  //  generate web.config
        title: 'web_config',
        template: 'src/web.config',
        filename: 'web.config',
        inject: false
      })
    ]
  }
}

一个关键元素是声明const HtmlWebpackPlugin2 = require('@vue/cli-service/node_modules/html-webpack-plugin'); 使用名称不同于 HtmlWebpackPlugin，以避免与vue-cli-service 使用HtmlWebpackPlugin 发生冲突。然后，在configureWebpack: 元素中，将带有template 路径的“新”HtmlWebpackPlugin2 插件添加到web.config 模板。 inject: false 选项对于避免将 <head> 和 <script> 标记注入到您的 web.config XML 中也很重要。

如 OP 的问题中所述，要在 IIS 下运行，web.config 文件应包含一个重写规则，该规则将客户端路由路径重写到您的虚拟根目录（也描述为here）。这可以通过html-webpack-plugin的变量扩展语法<%= process.env.MY_VARIABLE_NAME %>来完成：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
            <rule name="SPA Routes" stopProcessing="true">
                <!-- match everything by default -->
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <!-- unless its a file -->
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <!-- or a directory -->
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <!-- or is under the /api directory -->
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    <!-- list other routes or route prefixes here if you need to handle them server side -->
                </conditions>
                <!-- rewrite to application root -->
                <action type="Rewrite" url="<%= process.env.BASE_URL %>" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

BASE_URL 变量本身定义在与vue.config.js 相同文件夹中的.env.production 文件中，如here 或here 所述。它是一个纯文本文件，仅包含：

BASE_URL="/my-vroot-name/"

使用上述内容，您的标准yarn build 命令将在您的src\web.config 模板中执行变量替换并将输出写入dist\web.config。

设置 IIS 虚拟应用程序时，请确保您的物理路径指向 dist 文件夹，或根据您的服务器环境的需要调整 BASE_URL 和 HtmlWebpackPlugin2 输出 filename 路径。

【讨论】：