Сборка по умолчанию, экспортируемая пакетом NPM, является сборкой только во время выполнения.Это не приносит компилятор шаблона.Поэтому вам нужно будет либо импортировать полную версию сборки vue в свой javascript, либо создать псевдоним веб-пакета (если вы используете веб-пакет).
Эта проблема не возникнет, когда вы определяете шаблоны с помощью функции рендеринга илиКомпонент с одним файлом.
ПРИМЕЧАНИЕ:
Вам не нужно babel-loader, если вы не ожидаете поддержки старых браузеров и если вы не используете новейшие функции ES и вам не понадобится vue-loader если вы не используете однофайловые компоненты.
Также обратите внимание, что вы должны включить метатег в ваш HTML <meta charset="utf-8">
Это будет работать -
// webpack
module.exports = {
mode: "production",
entry: ["./app.js"],
output: { filename: "./app.min.js" },
resolve: { alias: { vue: "vue/dist/vue.js" } },
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.vue$/,
use: "vue-loader"
}
]
}
};
// app.js
import Vue from "vue";
// import Vue from 'vue/dist/vue.js';
window.app = new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Build something awesome" }
],
message: "Welcome"
},
delimiters: ["%%", "%%"]
});
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<p>%% message %%</p>
<li v-for="todo in todos">
%% todo.text %%
</li>
<input v-model="message">
</div>
<script src="app.min.js"></script>
</body>
</html>