gpt4 book ai didi

javascript - Vue 在用 webpack 编译时用注释替换 HTML

转载 作者:数据小太阳 更新时间:2023-10-29 05:17:28 24 4
gpt4 key购买 nike

我遇到的问题是,一旦我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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com