Vue用webpack编译时用注释替换HTML
Posted
技术标签:
【中文标题】Vue用webpack编译时用注释替换HTML【英文标题】：Vue replaces HTML with comment when compiling with webpack 【发布时间】：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')
)
【问题讨论】：
【参考方案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 发行版（包括编译器），并且输出将正确呈现。希望这会有所帮助！以上是关于Vue用webpack编译时用注释替换HTML的主要内容，如果未能解决你的问题，请参考以下文章
vue webpack 打包编译-webkit-box-orient: vertical 后消失