Когда вы используете Vue с веб-пакетом, вам нужен файл конфигурации веб-пакета, как показано ниже. Файл конфигурации состоит из списка файлов js записи. Я добавил один, вы можете добавить много. Эти файлы будут отправлены в папку dist.
const path = require("path");
const {
VueLoaderPlugin
} = require('vue-loader');
module.exports = {
mode: 'development',
watch: true,
entry: {
"main": "./src/main/main.js",
},
module: {
rules: [{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
//indentedSyntax: true // optional
},
},
},
],
},
]
},
plugins: [
new VueLoaderPlugin(),
],
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist")
}
};
Ваш входной файл js запустит конфигурации vue и подключит приложение к # app.
import Vue from 'vue'
import App from './Any_Vue_Component_1.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
И затем вам нужно добавить испущенный файл js веб-пакета в ваш Html.
<!doctype html>
<body>
<div id='app'></div>
</body>
<script type="text/javascript" src="./dist/main.js"></script>
</html>
Когда вы выполняете веб-пакет в каталоге вашего проекта, вы можете получать сообщения об ошибках из-за отсутствующих пакетов. Прочитайте сообщения об ошибках и установите запрашиваемые пакеты. В обычном случае вам понадобятся sass, sass-loader, style-loader, vue -loader, vue -template-compiler, css -loader.