【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（二）

导航：

（一）Electron跑起来
 （二）从零搭建Vue全家桶+webpack项目框架
 （三）Electron+Vue+Webpack，联合调试整个项目
 （四）Electron配置润色
 （五）预加载及自动更新
 （六）构建、发布整个项目（包括client和web）

摘要：上篇文章说到了如何新建工程，并启动一个最简单的Electron应用。“跑起来”了Electron，那就接着把Vue“跑起来”吧。有一点需要说明的是，webpack是贯穿这个系列始终的，我也是本着学习的态度，去介绍、总结一些常用到的配置及思路，有不恰当的地方，或者待优化的地方，欢迎留言。项目完整代码：https://github.com/luohao8023/electron-vue-template

下面开始~~~

一、安装依赖

vue、webpack：不多说了

vue-loader：解析、转换.vue文件

vue-template-compiler：vue-loader的依赖包，但又独立于vue-loader，简单的说，作用就是使用这个插件将template语法转为render函数

webpack-dev-server：快速搭建本地运行环境的工具

webpack-hot-middleware：搭配webpack-dev-server使用，实现热更新

chalk：命令行输出带有颜色的内容

依赖包就介绍这么多，后面需要什么可以自行下载，这里不多赘述了。

二、完善工程目录

【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（二）

webpack.render.config.js：渲染进程打包配置

dev.js：本地调试脚本

views：页面代码

index.js：vue工程入口文件

index.ejs：打包生成html文件时的模板

三、配置Vue工程

1、编写入口文件，render>index.js

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源码有关默认配置中有这么一句话

this.set("context", process.cwd());

这就是context的默认值，工程的根目录，那这个entry的配置就很好理解了。

output：打包的输入配置，路径建议设置为绝对路径。

module和plugins就不多说了。

5、编写本地调试脚本

/**

* Tip:    调试渲染进程

* Author: haoluo

* Data:   2019-10-30

**/

process.env.NODE_ENV = 'development';

const webpack = require('webpack');

const WebpackDevServer = require('webpack-dev-server');

const webpackHotMiddleware = require('webpack-hot-middleware');

const chalk = require('chalk');
const http = require('http');

function devRender() {

    console.log('启动渲染进程调试......');

    const webpackDevConfig = require('./webpack.render.config.js');

    const compiler = webpack(webpackDevConfig);

    new WebpackDevServer(

        compiler, {

            contentBase: webpackDevConfig.output.path,

            publicPath: webpackDevConfig.output.publicPath,

            open: true,//打开默认浏览器

            inline: true,//刷新模式

            hot: true,//热更新

            quiet: true,//除第一次编译外，其余不显示编译信息

            progress: true,//显示打包进度

            setup(app) {

                app.use(webpackHotMiddleware(compiler));

                app.use('*', (req, res, next) => {

                    if (String(req.originalUrl).indexOf('.html') > 0) {

                        getHtml(res);

                    } else {

                        next();

                    }

                });

            }

        }

    ).listen(8099, function(err) {

        if (err) return console.log(err);

        console.log(`Listening at http://localhost:8099`);

    });

    compiler.hooks.done.tap('doneCallback', (stats) => {

        const compilation = stats.compilation;

        Object.keys(compilation.assets).forEach(key => console.log(chalk.blue(key)));

        compilation.warnings.forEach(key => console.log(chalk.yellow(key)));

        compilation.errors.forEach(key => console.log(chalk.red(`${key}:${stats.compilation.errors[key]}`)));

        console.log(chalk.green(`${chalk.white('渲染进程调试完毕\n')}time:${(stats.endTime-stats.startTime)/1000} s`));

    });

}

function getHtml(res) {

    http.get(`http://localhost:8099`, (response) => {

        response.pipe(res);

    }).on('error', (err) => {

        console.log(err);

    });

}

devRender();

都是一些常规操作，可以阅读一下代码。

6、配置启动命令，在package.json中新增dev命令，启动本地调试（先起了再说，报错什么的，见招拆招）

  "scripts": {

    "start": "electron ./src/main/main.js",

    "dev": "node ./builder/dev.js"

  },

然后命令行运行npm run dev。。。。。。反正我这儿是报错了。。。说是找不到html-webpack-plugin模块，那就运行npm i html-webpack-plugin -D安装一下，如果步骤一没有做的话，后面可能还会遇到很多模块找不到的情况，解决方法很简单，缺什么安装什么就好了。安装完所有的模块之后，启动，还是报错了。。。。。。

ModuleNotFoundError: Module not found: Error: Can't resolve 'vue' in ...

ModuleNotFoundError: Module not found: Error: Can't resolve 'vue-loader' in ...

检查了下package.json文件和node_modules，发现我的vue-loader没有装，然后就是装一下（如果没有遇到这个步骤，可以忽略）

再次运行