Vue用webpack编译时用注释替换HTML答案

【问题标题】：Vue replaces HTML with comment when compiling with webpackVue用webpack编译时用注释替换HTML
【发布时间】：2018-08-26 08:26:04
【问题描述】：

我面临的问题是，一旦我import vue，vue 的包装元素（在我的情况下为 #app）将被以下评论替换

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

控制台没有错误，webpack 编译正常，但是我确实从 vue 的 mounted 方法获取控制台日志。

我的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>some content</h1>
        {{test}}
    </div>
    <script src="dist/bundle.js"></script>
</body>
</html>

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')
    }
})

【问题讨论】：

标签： javascript webpack vue.js

【解决方案1】：

您正在运行没有模板编译器的仅运行时构建。

查看https://vuejs.org/v2/guide/installation.html#Webpack

你需要为 'vue' 创建一个别名，所以 webpack 会从你的 node_modules/ 中包含正确的 vue/dist/*.js：

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

另见https://forum.vuejs.org/t/what-is-the-compiler-included-build/13239

【讨论】：

我一直在寻找答案...谢谢！
这个答案提供了关于为什么它不起作用的见解，但我相信 Sean Kelleher 下面的答案是更好的解决方案，因为它不是一种解决方法。不过谢谢你。

【解决方案2】：

虽然 Leonie 的回答很实用，但生产构建通常不需要模板编译器。我会说这可能是不受欢迎的，因为动态构建模板可能会对性能产生影响，我认为在这个答案中就是这种情况。此外，Leonie 的回答似乎在生产版本中包含了 Vue 的完整开发版本，由于所有的 extra content included in this version，应该不鼓励这样做。相反，可以在构建步骤中pre-compile templates。

执行此操作的最简单方法是使用单文件组件 (SFC)，如上一个链接中所述：

[The] 关联的构建设置会自动执行预编译你，所以构建的代码包含已经编译的渲染函数而不是原始模板字符串。

另一种方法，我需要用于我自己的情况，是为组件定义定义一个显式的render 函数而不是template，因此不需要编译。我需要这个是因为我当时生成的 Vue 项目对其所有组件都使用了 SFC，但根“安装”组件除外，它是使用以下对象明确定义的：

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

这在开发模式下运行良好，但在生产中因您遇到的“功能注释”问题而失败。从 Leonie 的回答中得到启发，我将上面的 sn-p 替换为以下内容：

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

这解决了我的生产版本的问题，而无需我包含完整的 Vue 开发版本。

【讨论】：

以上是对我有帮助的答案。我在 webpack/vue-cli 中使用了所有单文件组件，并且所有东西都很好地隔离了，但是当我添加 vue-router 时，我心不在焉地按照 Vue Router 文档示例，将 <router-link> 和 <router-view> 直接添加到我的 html <div id="app"></div>如前所述，在运行时需要模板编译器，呵呵！我只是将这些路由器指令复制到一个名为 App.vue 的简单基本 SFC 中，并像 Sean 在此答案中所做的那样将其包含在内，从而允许 webpack 对其进行预编译。非常感谢你让我发疯。
我有内联模板时可以使用这个方法吗？喜欢：<div id="app"> my template is here </div>。因为我们混合了 laravel 和 vue，其中视图由 laravel 组成，而不是在前端由 Vue 增强。
@Luckylooke 我不确定我的想法，但我做了一个快速的实验，看起来你不能在没有模板编译器的情况下使用内联模板。请参阅 jsfiddle.net/wgasbq2k 以获取使用 Vue 发行版而没有编译器的快速演示，其中不呈现输出（检查元素将显示函数注释）。从导入中删除 .runtime 将使用完整的 Vue 发行版（包括编译器），并且输出将正确呈现。希望这会有所帮助！