在使用webpack进行编译时，Vue将HTML替换为注释 [英] Vue replaces HTML with comment when compiling with webpack
问题描述
我遇到的问题是，一旦我 import vue，vue的包装元素（在我的情况下 #app ）将替换为以下注释
I am facing the problem that once I import vue, the wrapper element for vue (in my case #app) will be replaced with the following comment
<!--function (e,n,r,o){return sn(t,e,n,r,o,!0)}-->
控制台中没有错误，webpack编译得很好，但我从vue获取控制台日志已挂载方法。
There is no error in the console and webpack compiles fine, I do however get the console log from vue's mounted method.
我的index.html
My 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
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
src/app.js
import Vue from 'vue'
const app = new Vue({
el: "#app",
data: {
test: "asdf"
},
mounted() {
console.log('mounted')
}
})
推荐答案
您正在运行没有模板编译器的仅运行时构建。
You are running a runtime-only build without the template compiler.
签出 https://vuejs.org/v2/guide/installation.html#Webpack
你需要为'vue'创建一个别名，所以webpack包含来自你node_modules /的正确的vue / dist / *。js：
You need to create an alias for 'vue', so webpack includes the correct vue/dist/*.js from your node_modules/:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
另见 https://forum.vuejs.org/t/what-is-the-compiler-included-build/13239
这篇关于在使用webpack进行编译时，Vue将HTML替换为注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
