Javascript 使用webpack编译时，Vue将HTML替换为注释

我面临的问题是，一旦我导入了vue，vue的包装器元素（在我的例子中是

#app

）将替换为以下注释

<!--function (e,n,r,o){return sn(t,e,n,r,o,!0)}-->

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

src/app.js

import Vue from 'vue'

const app = new Vue({
    el: "#app",
    data: {
        test: "asdf"
    },
    mounted() {
        console.log('mounted')
    }
})

---

您正在运行一个只运行时的生成，而不使用模板编译器

退房

您需要为“vue”创建一个别名，以便Web包包含来自节点的正确vue/dist/*.js/：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

---

另请参见

，Leonie的答案是功能性的，包括生产构建通常不需要模板编译器。我想说这可能是不希望的，因为动态构建模板可能会对性能产生影响，我假设在这个答案中就是这样。此外，Leonie的回答似乎在生产构建中包含了Vue的完整开发版本，这应该被阻止，因为所有这些问题。相反，可以在构建步骤中执行以下操作

最简单的方法是使用单文件组件（SFC），如前一链接所述：

[关联的生成设置]会自动对 因此，生成的代码包含已编译的渲染函数 而不是原始模板字符串

另一种方法是为组件定义定义一个显式的

render

函数，而不是

template

，因此不需要编译，我需要根据自己的情况使用这种方法。我之所以需要它，是因为我当时生成的Vue项目对其所有组件使用了SFCs，但根“挂载”组件除外，它是使用以下对象明确定义的：

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App />'
})

---

这解决了我的生产版本上的问题，而不要求我包含Vue的完整开发版本。

我已经寻找了好几天的答案。。。非常感谢。这个答案提供了为什么它不起作用的见解，但我相信肖恩·凯勒赫下面的答案是更好的解决方案，因为它不是一个解决办法。不过，谢谢你。这是帮助我的答案。我在webpack/vue cli中使用了所有单文件组件，并将所有内容都很好地隔离，但当我添加vue router时，我心不在焉地遵循vue router文档示例，将

和

直接添加到我的html

中，正如前面提到的那样，运行时需要模板编译器，duh！我只是将这些路由器指令复制到一个简单的名为App.vue的基本SFC中，并将其作为Sean在这个答案中所做的那样包含在内，从而允许webpack对其进行预编译。非常感谢你们让我抓狂。当我有内联模板时，我可以使用这种方法吗？比如：

我的模板在这里

。因为我们混合了laravel和vue，其中视图是由laravel组成的，而前端的视图是由vue增强的。@Luckylooke我当时还不确定，但我做了一个快速的实验，看起来没有模板编译器就无法使用内联模板。有关使用Vue发行版而不使用编译器的快速演示，请参阅，其中不呈现输出（检查元素将显示函数注释）。从导入中删除

.runtime

将使用完整的Vue发行版（包括编译器），并且输出将正确呈现。希望这有帮助！

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App />'
})

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  render: (h) => {
    return h(App)
  }
})