如何配置vue-loader将模板编译为HTML字符串而非JS渲染函数

当然可以做到！你需要调整vue-loader的配置，跳过它默认对模板HTML的编译步骤，直接输出原始的HTML字符串。下面是具体的实现方式：

方法一：使用raw-loader接管模板处理 #

最简单的方式是让vue-loader的template loader使用raw-loader，它会直接把模板内容读取为字符串，不经过vue-template-compiler的编译。

首先确保你已经安装了raw-loader：

npm install raw-loader --save-dev
# 或者 yarn add raw-loader -D

然后根据项目类型修改配置：

webpack.config.js 示例 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            template: 'raw-loader'
          }
        }
      }
    ]
  }
}

vue-cli 项目的vue.config.js 示例 #

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 替换模板loader为raw-loader
        options.loaders.template = 'raw-loader'
        return options
      })
  }
}

方法二：自定义postLoader直接返回HTML字符串 #

如果你想更灵活地控制输出，可以自定义postLoader函数，直接把原始HTML内容包装成导出字符串的JS代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postLoaders: {
            template: function(source) {
              // 将原始HTML字符串转义后，作为默认导出返回
              return `export default ${JSON.stringify(source)}`
            }
          }
        }
      }
    ]
  }
}

使用效果 #

配置完成后，你的Vue组件模板部分会被直接导出为纯HTML字符串。在组件内部，你可以通过this.$options.template获取到原始的HTML内容，比如：

<template>
  <div class="demo">Hello, Vue Template!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$options.template); // 输出: "<div class=\"demo\">Hello, Vue Template!</div>"
  }
}
</script>

需要注意的是，这种方式下Vue不会自动编译模板为渲染函数，如果你需要渲染这个HTML字符串，可以使用v-html指令或者手动插入到DOM中。

内容的提问来源于stack exchange，提问作者user1453345