使用Webpack编译时Vue将HTML替换为注释的问题求助

咱们先拆解下你的现象：Webpack编译正常、控制台没报错，mounted钩子还能正常触发，但挂载元素被替换成了奇怪的注释——这说明Vue实例其实已经成功初始化了，只是模板渲染环节出了问题，没生成正确的DOM内容。下面给你几个针对性的排查和解决方向：

1. 检查Vue版本与挂载方式是否匹配 #

• 如果你用的是Vue 3，但还在沿用Vue 2的写法（比如new Vue({el: '#app'})），就可能出现这种异常。Vue 3需要用createApp来创建实例：

  // 正确的Vue 3写法
  import { createApp } from 'vue'
  import App from './App.vue'
  
  createApp(App).mount('#app')
  

• 要是你用的是Vue 2，那确认下是否导入了完整版本的Vue（而非runtime-only版），或者是否正确配置了模板编译。

2. 确认是否使用了Runtime-only版本的Vue #

Vue的runtime-only版本不支持直接编译模板（比如通过el挂载时解析元素内的模板），如果你的项目没预编译模板，就会导致渲染异常。

• 可以在Webpack配置中添加别名，强制使用完整版本的Vue：

  // webpack.config.js
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 导入包含编译器的Vue版本
    }
  }
  

• 或者改用.vue单文件组件（单文件组件会被vue-loader预编译模板，runtime-only版本就能正常使用）。

3. 检查vue-loader与Webpack的配置是否正确 #

如果你的项目用了单文件组件，但vue-loader配置有误，模板就无法被正确编译成render函数，最终导致挂载元素被替换为注释：

• 确保已经安装了vue-loader和vue-template-compiler（版本要和Vue对应）：

  npm install vue-loader vue-template-compiler --save-dev
  

• 在Webpack配置中添加vue-loader的规则：

  // webpack.config.js
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin() // 必须添加这个插件
    ]
  }
  

4. 检查Vue实例的模板配置 #

如果你的Vue实例既没有指定template选项，也没有render函数，同时#app元素内没有任何内容，也可能出现这种情况。可以尝试：

• 在#app内添加基础模板内容，比如：

  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  

• 或者在Vue实例中显式指定template或render函数：

  // Vue 2示例
  new Vue({
    el: '#app',
    template: '<h1>{{ message }}</h1>',
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  })
  

你可以按照上面的顺序逐一排查，大概率能解决这个问题~

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