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

Question

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

我现在的工作方式是到我的测试机器上，git pull 主 dev 分支，执行“npm run build”，创建 web.config 文件并将其放到 dist 文件夹中。 我猜我可以在我的 CI/CD 管道中做到这一点（我还没有……），但我想知道在 CI/CD 之外是否有任何方法可以做到这一点？ 有什么办法可以运行“npm run build”，它会自动为我生成/复制 web.config 文件吗？

Answer 1

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

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

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

Answer 2

如果您有一个不需要任何变量扩展的不变web.config文件， @Phil 的答案既简单又完美。 但是，如果您想生成一个web.config文件，其中包含例如带有BASE_URL的 Rewrite 规则，则以下操作将起作用：

在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的使用发生HtmlWebpackPlugin 。 然后，在configureWebpack:元素中，将带有template路径的“新” HtmlWebpackPlugin2插件添加到您的web.config模板。 inject: false选项对于避免将<head>和<script>标记注入web.config XML 也很重要。

正如 OP 的问题中所指出的，要在 IIS 下运行， web.config文件应该包含一个重写规则，该规则将客户端路由路径重写为您的虚拟根（也在这里描述）。 这可以通过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变量本身是在限定的.env.production在同一文件夹中文件vue.config.js如所描述的此处或在这里。 它是一个纯文本文件，仅包含：

BASE_URL="/my-vroot-name/"

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

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

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2020-11-06 06:15:56

解决方案2
0 2021-06-08 21:20:23

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2020-11-06 06:15:56

解决方案2 0 2021-06-08 21:20:23

解决方案1
4 已采纳 2020-11-06 06:15:56

解决方案2
0 2021-06-08 21:20:23