我遇到的问题是，一旦我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')
}
}
源/app.js
import Vue from 'vue'
const app = new Vue({
el: "#app",
data: {
test: "asdf"
},
mounted() {
console.log('mounted')
}
})
最佳答案
您正在运行没有模板编译器的仅运行时构建。
查看 https://v2.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
关于javascript - Vue 在用 webpack 编译时用注释替换 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49334815/