Webpack Pug/HTML加载器在生产模式下将大写字母转换为小写
Webpack Pug/HTML加载器在生产模式下将大写字母转换为小写
提问于 2020-07-30 00:56:37
我使用vue单文件组件，并将标记和逻辑分别分离到.pug和.ts文件。如果您对我不统一的原因感兴趣，请参阅comments部分。
问题
import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";
console.log(template);
@Component({
template,
components: {
CompoundControlBase
}
})
export default class InputField extends Vue {
// ...
}在开发构建模式中，导出模板是正确的(为了可读性，我美化了它)：
<CompoundControlBase
:required="required"
:displayInputIsRequiredBadge="displayInputIsRequiredBadge"
<TextareaAutosize
v-if="multiline"
:value="value"
/><TextareaAutosize>
</CompoundControlBase>在生产模式中，我的标记被降低了。因此，console.log(template)输出：
<compoundcontrolbase
:required=required
:displayinputisrequiredbadge=displayInputIsRequiredBadge
<textareaautosize
v-if=multiline
:value=value
></textareaautosize>
</compoundcontrolbase>当然，我的视野被打破了。
Webpack配置
const WebpackConfig = {
// ...
optimization: {
noEmitOnErrors: !isDevelopmentBuildingMode,
minimize: !isDevelopmentBuildingMode
},
module: {
rules: [
{
test: /\.vue$/u,
loader: "vue-loader"
},
{
test: /\.pug$/u,
oneOf: [
// for ".vue" files
{
resourceQuery: /^\?vue/u,
use: [ "pug-plain-loader" ]
},
// for ".pug" files
{
use: [ "html-loader", "pug-html-loader" ]
}
]
},
// ...
]
}
}评论
老实说，我不知道为什么我们需要? in resourceQuery: /^\?vue/u, (欢迎解释)。但是，在开发模式下，上述配置为xxxx.vue和xxxx.vue.pug文件都提供了属性。
我正在使用以下文件命名约定：
xxx.pug：不会将用作vue组件模板的pug文件。xxx.vue.pug：pug文件，将用作vue组件模板。xxx.vue：单文件vue组件。xxx.vue.ts：vue组件的逻辑。从xxx.vue.pug导出所需的模板，就像在InputField中一样。
为什么我需要xxx.vue.ts？正因如此：
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}对于TypeScrpt xxx.vue文件，公共方法/字段和非默认方法都不可见。对于普通的(非应用的)组件，我不能接受它。
雷普
步骤1:安装依赖项
npm i第二步:让我们先检查一下开发大楼。
npm run DevelopmentBuild在156 of DevelopmentBuild\EntryPoint.js行中，您可以在pug模板下面检查：
Alpha
Bravo OK已适当汇编：
第三步:生产构建问题
npm run ProuductionBuild您可以在列13中找到小写标记。
您还可以在浏览器中打开index.html，并使用已编译的TestComponent检查console.log()输出。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-06 14:15:10
问题是“html-加载程序”。它的选项minimize设置为生产模式下的true (html-加载程序/#最小化)。
我在角度上也有类似的问题，不得不取消一些选项，比如(参见参考html-扫雷器.程序#选项.快速引用)。
// webpack.config.js
{
test: /\.pug$/u,
oneOf: [
// for ".vue" files
{
resourceQuery: /^\?vue/u,
use: [ "pug-plain-loader" ]
},
// for ".pug" files
{
use: [ "html-loader", "pug-html-loader" ]
}
],
options: {
minimize: { // <----
caseSensitive: false // <----
} // <----
}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63164597
复制相关文章
相似问题
腾讯云开发者
