导航：

复制代码
import Vue from 'vue'; import index from './views/index.vue';  //取消 Vue 所有的日志与警告Vue.config.silent = true; new Vue({     el: '#app',     render: h => h(index) });
复制代码

2、编写根组件，render>views>index.vue

复制代码
<template>    <div class="content">        <h1>Welcome to electron-vue-template!</h1>    </div></template><script> export default {} </script><style></style>
复制代码

3、编写html模板文件，render>index.ejs，webpack解析、打包vue文件时，以此模板生成html文件

复制代码
<!DOCTYPE html><html lang="zh-CN"><!--template for 2019年10月30日--><!--<%= new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate()+' '+new Date().getHours()+':'+new Date().getMinutes() %>--><head>    <meta charset="UTF-8">    <title>模板文件</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">    <meta HTTP-EQUIV="expires" CONTENT="0"></head><body>    <div id="app"></div></body></html>
复制代码

4、编写webpack配置文件，builder>webpack.render.config.js，建议按照本文这种方式，把配置文件单独抽出来，这样的话，本地调试和打包可以共用一套配置，只需要传递不同参数就可以了，不要把所有的配置和打包逻辑写在一个文件里，太长、太乱、太难维护

复制代码
/* Name:    渲染进程配置 Author: haoluo Date:   2019-10-30  */ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const devMode = process.env.NODE_ENV === 'development';  module.exports = {     mode: devMode ? 'development' : 'production',     entry: {         main: './src/render/index.js'     },     output: {         path: path.join(__dirname, '../app/'),         publicPath: devMode ? '/' : '',         filename: './js/[name].[hash:8].js'     },     module: {         rules: [             {                 test: /\.vue$/,                 exclude: /node_modules/,                 loader: 'vue-loader'             }         ]     },     plugins: [         new HtmlWebpackPlugin({             template: './src/render/index.ejs',             filename: './index.html',             title: 'electron-vue-template',             inject: false,             hash: true,             mode: devMode         })     ] }
复制代码

适当解释一下：

mode：环境参数，针对不同的环境，webpack内部有一些不同的机制，并对相应环境做相应的优化

entry：入口，webpack执行构建的第一步将从入口文件开始，递归查询并解析所有依赖的模块。配置方式有多种，可参考webpack文档，这里我们配置的路径是'./src/render/index.js'，意思是src目录下，render文件夹下的index.js，而webpack配置文件是在builder文件夹下，那这个“./”的相对路径到底是相对于谁呢？这就得说一下webpack中的路径问题了，context 是 webpack 编译时的基础目录，入口起点（entry）会相对于此目录查找，那这个context又是个什么东西？webpack源码有关默认配置中有这么一句话