I have an Electron project and I am using webpack as a module bundler, here is the relevant code and configuration for my project.
webpack.config.js:
const path = require('path')
const {VueLoaderPlugin} = require("vue-loader")
module.exports = {
mode: "development",
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "bundle.js"
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
use: [
{loader: "vue-loader"}
]
},
{
test: /\.css$/,
use: [
{loader: "vue-style-loader"},
{loader: "css-loader"}
]
}
]
}
}
src/index.js:
import Vue from 'vue'
new Vue({
template: '<h1>{{ message }}</h1>',
data: {
message: "Hello World"
}
}).$mount('#app')
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
I know it can be configured in webpack.config.js:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
But the Vue object in index.js is just an entry, I don't want to use vue.esm.js for such a little code to run smoothly, I want to use vue.runtime-only.js, but it needs to precompile the template .
How can I precompile this Vue object?
I have found a solution, there is no way to directly compile the Vue object in the js file.
But you can extract the template of the Chinese Vue object in index.js into the App.vue file:
<template>
<div>
<h1>Hello World.</h1>
</div>
</template>
index.js imports App.vue.:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// Load the precompiled template with render .
render: h => h(App)
}).$mount('#app')