gpt4 book ai didi

javascript - 带有 webpack 的简单 Vue.js

转载 作者:行者123 更新时间:2023-12-03 02:55:07 24 4
gpt4 key购买 nike

我基本上对 javascript/webpack/npm/whatever 一无所知,但我正在尝试一个简单的 Vue.js 应用程序。

看起来像这样:

index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Test</title>
</head>
<body>
<div class="vue-app">
{{ message }}
</div>
<script src="/static/testvue.bundle.js"></script>
</body>
</html>

main.js

import Vue from 'vue';

new Vue({
data: {
message: 'Testing Vue'
},
el: '.vue-app'
});

webpack.config.js

var path = require('path');

module.exports = {
entry: './main.js',
output: {
filename: 'testvue.bundle.js',
path: path.join(__dirname, '')
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',

query: {
presets: ['es2015']
}
}
]
}
};

当我访问该网页时,它是空白的,我在控制台的“元素”中看到了这一点:

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

知道发生了什么以及如何让它发挥作用吗?就好像它试图做某事,但有些事情不符合要求。我尝试更改一些我看到的不同的东西,例如使用 #vue-app 而不是 .vue-app 或将其更改为“body”下,然后将 {{message}} 直接放入正文中,但这并没有没有帮助,我不知道有什么区别。

最佳答案

所以,看起来问题是 webpack 需要 Vue 的“ESM”版本。

您可以按照以下方式向 webpack.config.js 添加一些内容:https://v2.vuejs.org/v2/guide/installation.html

然后它似乎开始工作。

代码片段

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

我不确定有什么区别或者为什么这很重要。

关于javascript - 带有 webpack 的简单 Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47665697/

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