Vue.js 升级到 vuecli 3 后，HTML 中的空格消失了

发布于07月12日

我使用的vue cli 2没有任何自定义配置.现在我升级到了cli3，我注意到在经过处理的HTML中，它删除了所有空白.

<div class="link">
    <i class="fa fa-lg" :class="item.icon"/>
    <span class="hidden-sm hidden-xs">{{item.name}}</span>
</div>

旧的(cli 2+网页包)将其转换为:

<div class="link"><i class="fa fa-lg fa-calendar"/> <span class="hidden-sm hidden-xs">CALENDAR</span></div>

而新的一个做到了这一点:

<div class="link"><i class="fa fa-lg fa-calendar"/><span class="hidden-sm hidden-xs">CALENDAR</span></div>

请注意，<span class...之前的空格消失了，这导致:

要做到这一点:

我的vue.配置.js非常基本:

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

我知道我可以添加 个或对html本身进行其他更改，但该应用程序相当大，查找所有这些位置需要几天时间.

有人知道我需要哪些选项来确保它像使用旧的cli+webpack组合一样优化html吗？

// vue.config.js module.exports = { chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .loader("vue-loader") .tap(options => { // modify the options... options.compilerOptions.preserveWhitespace = true; return options; }); } };

Vue.js 升级到 vuecli 3 后，HTML 中的空格消失了

推荐答案

Vue.js相关问答推荐

更新 Shopware 管理 CMS 组件中的编辑器视图

Svelte 中的简单react 性实验以意想不到的方式失败了. Vue 等效项没有

我如何使用 vuejs 在我的 url 中编码一个令牌

混合使用 React 和 Vue 是个好主意吗？

如何使用带有自定义标签和类的`transition-group`

Vuejs中的条件a href

Vuetify Datatable - 在所有列上启用内容编辑

使用 Vue Router 设置页面标题

如何在 vuejs 中异步加载图像 src url？

webpack模块解析失败意外字符'@'

如何将参数传递给使用 ...mapActions(...) 映射的函数？

单击复选框后，V-model 未更新

如果我观看解构的props，Vue 3 手表将无法正常工作

如何在 VueJS 中访问 [ob： Observer] 的元素？

Vue：如何在按钮单击时调用 .focus()

Vuetify 数据表不显示数据

使密码字符隐藏在 Vuetify 字段中

无法访问手表处理程序 vuejs 中的数据变量

VueJS 按键查找元素

将它们分开时将 Django 的 csrf_token 放入 Vuejs