Tengo un proyecto de Electron y estoy usando webpack como un paquete de módulos, aquí está el código y la configuración relevantes para mi proyecto.
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>Sé que se puede configurar en webpack.config.js:
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }Pero el objeto Vue en index.js es solo una entrada, no quiero usar vue.esm.js para que un código tan pequeño funcione sin problemas, quiero usar vue.runtime-only.js, pero necesita precompilar la plantilla.
¿Cómo puedo precompilar este objeto Vue?
He encontrado una solución, no hay forma de compilar directamente el objeto Vue en el archivo js.
Pero puede extraer la plantilla del objeto Chinese Vue en index.js en el archivo App.vue:
<template> <div> <h1>Hello World.</h1> </div> </template>index.js importa 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')